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内 容 简 介 
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“电子 商务 网 站 建设 ”是 高 职 院 校 电子 商务 专业 的 一 门 核心 课程 ， 它 对 于 培养 学 生 的 
务 网 站 建设 与 维护 能 力 具 有 重要 意义 。 

本 书 依 据 网 站 建设 与 维护 人 员 所 应 具备 的 职业 能 力 ， 以 真实 的 工程 项 目 “Qzmall 电子 
商城 ”为 工作 任务 ， 以 Java Web 为 教学 平台 ， 以 Java 为 程序 设计 语言 ， 将 “Qzmall 电子 
商城 ”的 开发 与 维护 分 解 为 7 个 章节 ， 每 个 章节 充分 体现 相应 的 知识 要 点 和 结构 。 本 书 主 
要 具有 以 下 几 个 特点 。 


1. 准确 的 课程 定位 

根据 电子 商务 企业 对 网 站 设计 人 员 的 基本 要 求 ， 将 课程 目标 定位 为 培养 掌握 Java Web 
基本 开发 技术 的 网 站 设计 与 维护 人 员 ， 确 保 课程 设置 和 课程 内 容 对 接 职业 标准 和 岗位 
要 求 。 

2. 充分 体现 职业 性 的 特点 

采用 MVC 开发 模式 ， 注 重 对 学 生 团队 合作 精神 的 培养 ， 通 过 指导 学 生 完 成 一 系列 实 
际 工作 任务 来 达到 职业 能 力 目标 的 要 求 ， 重 点 培养 学 生 解 决 实际 问题 的 能 力 。 


3. 图 文 并 茂 ， 内 容 丰 富 


根据 目前 高 职 学 生 的 认 知 能 力 和 综合 素质 ， 在 教材 内 容 的 处 理 上 做 到 知识 结构 合理 ， 
图 文 并 茂 ， 内 容 丰 富 。 在 内 容 的 安排 上 ， 立 足 高 职 学 生理 论 基础 知识 较 差 ， 接 受理 论 性 知 
识 的 能 力 有 限 的 现状 ， 先 易 后 难 ， 使 教材 内 容 在 够 用 、 实 用 、 会 用 等 方面 体现 出 特色 ， 符 
合 高 职 教育 规律 ， 让 学 生 掌握 必要 的 基本 原理 和 基本 操作 技能 。 

4. 每 个 章节 开头 列 出 应 掌握 的 知识 能 力 目标 

每 个 章节 先 介绍 、 分 析 完 成 部 分 模块 的 流程 设计 和 相关 知识 点 ， 再 层 层 展开 ， 按 照 项 
目 开 发 的 基本 流程 完成 模块 开发 与 设计 ， 通 过 强化 相关 知识 与 技能 的 实际 应 用 ， 从 而 提高 
学 生 的 学 习 兴 趣 。 每 章 后 面 安 排 了 课 后 训练 ， 习 题 侧重 实际 应 用 ， 注 重 培养 学 生 的 动手 
能 力 。 

5. 有效 整 合 教材 内 容 与 教学 资源 ， 打 造 立体 化 和 自学 学 习 式 的 新 型 教材 

在 编写 教材 的 同时 ， 还 开发 了 涵盖 课程 标准 、PPT、 完 整 项 目 实例 和 课程 开发 所 需要 
的 相关 软件 及 课程 开发 的 项 目 原型 和 相关 素材 等 在 内 的 丰富 的 教学 资源 。 

本 书 在 讲解 如 何 运用 Java Web 知识 进行 电子 商务 网 站 建设 的 同时 ， 还 涵盖 了 
jQuery、JSTL 标签 方面 的 知识 ， 对 于 这 部 分 内 容 ， 我 们 只 讲授 和 本 课程 有 关 的 内 容 ， 超 出 
本 课程 的 内 容 ， 我 们 没有 涉及 。 本 书 所 有 的 源 代码 都 在 Windows 7+JDK 1.8+Tomcat 8.0+ 


或 


.人 电子 商务 网 站 建设 企业 案例 
IntelliJ IDEA 2017 环境 下 调试 通过 ， 第 四 章 的 jQuery 代码 在 HBuilder 环境 下 调试 通过 。 

参与 本 书 编写 的 范 兴 昌 等 作者 来 自 电子 商 务 专业 教学 一 线 ， 具 有 丰富 的 教学 经 验 ， 同 
时 也 了 解 企业 对 电子 商务 人 才 的 专业 需求 。 因 此 ， 本 书 既 注重 理论 知识 的 系统 性 ， 又 注重 
培养 学 生 的 动手 和 实践 能 力 。 
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| 局 一 、 课 程 设计 理念 与 思 


本 课程 设计 遵循 以 职业 能 力 培养 为 重点 ， 基 于 工作 过 程 进行 课程 开发 与 设计 的 理念 ， 
切实 深化 职业 教育 教学 改革 ， 提 高 课程 建设 水 平和 人 才 培 养 质量 ， 体 现 了 课程 职业 性 、 实 
践 性 和 开放 性 的 要 求 。“ 电 子 商 务 网 站 建设 ”课程 涉及 面 广 ， 相 关 知 识 多 ， 为 了 科学 合理 
选取 教学 内 容 和 开展 教学 设计 ， 笔 者 总 结 以 往 教学 经 验 和 教学 效果 ， 开 展 大 量 课 程 建设 调 
研 ， 采 纳 专家 们 提出 的 建议 和 意见 ， 与 企业 共同 开发 课程 ， 并 参照 了 人 力 资源 与 社会 保障 
部 颁布 的 《电子 商务 师 国家 职业 标准 》。 根 据 建设 任务 设计 电子 商务 网 站 建设 课程 的 教学 
内 容 ， 保 障 了 课程 内 容 选取 的 科学 合理 ， 并 且 具 有 针对 性 和 适用 性 。 课 程 设计 充分 考虑 学 
生 的 认 知 水 平和 认 知 能 力 ， 把 握 学 生 的 认 知 规律 ， 合 理 地 组 织 教 学 内 容 ， 按 照 由 简单 到 复 
杂 、 由 局 部 到 整体 、 由 易 到 难 循序 渐进 地 讲授 知识 和 训练 技能 。 

本 课程 强调 以 学 生 为 中 心 的 授课 模式 ， 学 生 主 要 在 老师 的 引导 下 ， 对 一 个 电 商 平台 进 
行 分 析 、 设 计 与 开发 ， 按 照 软件 开发 的 工作 流程 完成 规划 、 设 计 、 开 发 、 测 试 等 过 程 ， 提 
交 网 站 建设 计划 书 、 工 作 日 志 及 系统 设计 的 源 代码 ， 让 学 生 经 历 真 实 的 网 站 开发 过 程 ， 使 
学 生 走向 工作 岗位 后 ， 可 以 实现 与 工作 岗位 的 无 颖 对 接 。 

在 教学 过 程 中 ， 采 用 团队 分 工 的 形式 ， 每 组 最 好 不 超过 5 人 ， 要 求 分 工 明 确 ， 任 务 具 
体 ， 团 队 协作 融洽 ;提交 的 文档 资料 齐全 、 技 术 运用 恰当 。 


| 局 二 、 本 课程 的 授课 对 象 


“电子 商务 网 站 建设 ”是 电子 商务 专业 必修 课程 之 一 ， 是 一 门 实践 性 很 强 、 面 向 应 用 
的 课程 。 它 把 基本 概念 和 基本 理论 融入 具体 的 网 站 建设 与 管理 中 。 通 过 本 课程 的 学 习 ， 要 
求 能 够 理解 网 站 建设 的 整体 概念 和 基本 步骤 ， 掌 握 网 站 规划 、 设 计 、 制 作 、 维 护 的 基本 内 
容 ， 同 时 能 够 熟练 使 用 常用 的 工具 软件 进行 网 站 的 建设 与 维护 。 本 课程 授课 对 象 主要 是 掌 
握 了 JSP 程序 设计 基本 理论 和 基本 应 用 技能 的 电子 商务 专业 的 学 生 ， 也 可 为 其 他 相关 专业 
的 学 生 从 事 网 站 开发 提供 借鉴 和 参考 。 


| 局 三、 课程 的 主要 内 容 


本 书 是 作者 在 总 结 了 多 年 教学 经 验 的 基础 上 编写 的 ， 全 书 围绕 一 个 实际 项 目 ， 从 视图 
层 、 控 制 层 、 业 务 逻辑 层 3 个 层次 全 面 、 翔 实地 介绍 了 电子 商务 网 站 建设 与 开发 的 过 程 。 
全 书 共 分 为 8 章 ， 第 一 章 主要 介绍 本 书 的 主要 内 容 及 设计 思想 ， 第 二 章 介绍 如 何 搭建 网 站 
开发 环境 ， 主 要 包括 Java Web 相关 软件 的 安装 及 运行 环境 配置 、MVC 开发 模式 及 其 优 
点 ; 第 三 章 介 绍 Qzmall 电子 商城 系统 设计 ， 主 要 包括 系统 需求 分 析 、 数 据 库 设 计 和 系统 
详细 设计 ;第 四 章 介绍 jQuery 和 JSTL 标签 应 用 ， 主 要 内 容 包 括 jQuery 语法 及 应 用 、 异 步 
请 求 、JSTL 标签 应 用 ;第 五 章 介 绍 商品 显示 模块 设计 ， 主 要 内 容 包括 商品 分 类 显示 子 模块 
设计 、 商 品 详情 子 模块 设计 ;第 六 章 介绍 用 户 模块 设计 ， 主 要 内 容 包括 用 户 注 册子 模块 设 
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计 、 用 户 登 录 子 模块 设计 、 用 户 个 人 中 心 子 模块 设计 ; 第 七 章 介绍 购物 车 与 订单 模块 设 
计 ， 主 要 内 容 包括 购物 车 模块 设计 、 生 成 订单 子 模块 设计 和 我 的 订单 子 模块 设计 ; 第 八 
章 介绍 后 台 维护 模块 设计 ， 主 要 内 容 包括 商品 维护 子 模块 设计 和 用 户 订单 后 台 维护 子 模 
块 设计 。 
| 局 四 、 教 学 设计 

(一 ) 教 学 内 容 模块 设计 

“电子 商务 网 站 建设 ”是 一 门 是 以 培养 学 生 的 企业 网 站 建设 能 力 为 主要 目标 的 课程 ， 
相关 理论 知识 必须 在 技能 训练 过 程 中 得 以 理解 和 掌握 ， 职 业态 度 和 习惯 要 经 过 持续 的 训练 
得 以 养 成 。 本 书 根据 软件 企业 对 基于 Web 开发 能 力 的 实际 需求 ， 坚 持 理论 够 用 、 适 用 、 实 
用 原则 ， 以 项 目 为 中 心 ， 以 能 力 为 本 位 ， 将 电子 商务 网 站 建设 基本 应 用 的 知识 和 技能 重新 
进行 组 合 ， 形 成 了 八大 模块 的 教学 内 容 。 

(二 ) 教 学 内 容 模块 与 项 目 功能 模块 的 对 应 设计 

教学 内 容 模块 与 项 目 功能 模块 的 对 应 如 表 1-1 所 示 。 

表 1-1 教学 内 容 模块 与 项 目 功能 模块 的 对 应 


商品 模块 设计 
Servlet 读 取 表 单数 据 和 session 数据 用 户 模块 设计 
购物 车 与 订单 设计 

商品 与 订单 后 台 维护 


(三 ) 实 践 环节 的 系统 化 设计 


遵循 “任务 驱动 、 案 例 教学 、 理 论 实践 一 体 化 ”的 教学 模式 ， 通 过 精 选 真实 项 目 ， 将 
项 目 精 心 分 解 ， 让 学 生 在 学 习 案 例 的 同时 ， 掌 握 Java Web 开发 技术 ， 进 而 培养 项 目 开 发 能 
力 。 同 时 ， 将 理论 教学 和 实践 教学 在 同一 教学 时 间 和 教学 地 点 开展 ， 将 实践 环节 (课堂 模 
拟 、 课 堂 实践 、 课 外 拓展 、 单 元 实践 、 综 合 实 训 ) 进 行 系统 化 设计 ， 体 现 “学 生 为 主体 ， 教 
师 为 主导 ”的 教学 思想 ， 实 现 “ 教 、 学 、 做 ”的 完美 统一 。 

在 教学 过 程 中 ， 针 对 每 一 个 教学 单元 ， 在 实 训 室 进行 教学 ， 授 课时 边 讲 边 练 ， 以 调动 
学 生 学 习 的 积极 性 和 主动 性 ， 融 教 、 学 、 做 于 一 体 ， 通 过 操作 训练 提高 学 生 对 课程 技能 
点 、 知 识 点 的 理解 和 掌握 。 

本 课程 开发 了 丰富 的 数字 化 教学 资源 ， 如 表 1-2 所 示 。 
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表 1-2 数字 化 教学 资源 


序号 资源 名 称 表现 形式 与 内 涵 

课程 标准 Word 电子 文档 ， 包 含 教学 目标 、 教 学 目录 、 学 时 分 配 ， 可 供 教师 备课 使 用 
是 教师 组 织 教 学 的 实施 计划 表 ， 包 括 具体 教学 进程 、 授 课 内 容 及 时 间 、 课 外 
作业 、 授 课 方式 等 
3 PPT PPT 电子 文档 ， 可 以 直接 使 用 ， 也 可 以 根据 需要 进行 修改 
4 项 目 库 课 内 教学 使 用 、 课 外 学 生 进 行 学 习 和 训练 使 用 的 所 有 项 目 源 代码 


上 述 资源 的 开发 ， 可 以 弥补 单一 纸 质 教材 的 不 足 ， 有 利于 教师 利用 现代 教育 技术 手段 
完成 教学 任务 ， 同 时 也 提高 了 教材 的 适用 性 与 普及 性 ， 特 别 是 部 分 教学 条 件 较 弱 或 教学 条 
件 较 强 但 学 生 接受 能 力 较 弱 的 学 校 ， 教 师 利用 资源 结合 教材 ， 可 以 更 好 地 组 织 教学 活动 。 


授课 计划 
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知识 能 力 目标 


. Java Web 运行 环境 。 

. 了 解 mtelliJIDEA 开发 工具 的 主要 特点 。 
. 学 会 DK 的 安装 与 配置 。 

. 学 会 Tomcat 的 安装 与 配置 。 

. 学 会 MySQL 安装 。 

.学 会 mtelliJIDEA 开发 工具 的 基本 应 用 。 


[ 问题 提示 一 


Java Web 是 用 Java 技术 来 解决 相关 Web 互联 网 领域 的 技术 总 称 。Web 包括 Web 服务 
器 和 Web 客户 端 两 部 分 。Java 在 客户 端的 应 用 有 Java Applet; Java 在 服务 器 端的 应 用 非 
常 丰富 ， 如 Servlet、JSP 和 第 三 方 框架 等 。Java 技术 为 Web 领域 的 发 展 注 入 了 强大 的 动 
力 ， 它 以 Java 语言 为 基础 ， 与 HTML 语言 紧密 结合 ， 可 以 很 好 地 实现 Web 页 面 设计 和 上 业 
务 逻 辑 的 分 离 ， 可 以 让 Web 程序 员 专 注 于 业务 逻辑 的 实现 ， 大 大 提高 了 系统 的 执行 性 能 。 
随 着 Internet 的 发 展 与 普及 ， 基 于 Web 应 用 系统 的 开发 也 成 为 软件 行业 的 主流 ， 与 ASP 与 
PHP 相 比 有 着 明显 优势 的 Java Web 开发 技术 ， 在 Web 开发 中 占据 主导 地 位 ， 如 著名 的 淘 
宝 、 京 东 等 电子 商务 网 站 都 是 用 它 来 进行 开发 的 。 本 书 也 是 重点 讲解 如 何 运 用 Java Web 技 
术 进 行 电子 商务 网 站 的 开发 。 

问题 : 利用 Java Web 技术 进行 电子 商务 网 站 开发 ， 首 先 要 做 哪些 准备 并 使 用 什么 开 
发 工具 呢 ? 


m2- 
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习 一 、Java Web 运行 环境 简介 


为 了 能 够 编写 Java Web 程序 ， 至 少 需要 具备 两 个 基本 条 件 : 一 是 
需要 在 计算 机 中 安装 JDK， 并 进行 相关 的 环境 变量 的 设置 ， 二 是 需要 在 
计算 机 中 安装 Java Web 引擎 ， 即 Web 服务 器 ， 如 J2EE 服务 器 、IIS 服 
务 器 、Tomcat 服务 器 。 基 于 Java 的 Web 应 用 系统 的 开发 和 运行 环境 既 
包括 客户 端 环 境 ， 也 包括 服务 器 环境 ， 其 中 客户 端 运行 环境 只 需要 使 用 
浏览 器 即 可 ， 推 荐 使 用 火狐 浏览 器 (Mozilla Firefox) 或 谷歌 浏览 器 (Google Chrome)， 而 服务 
器 端的 运行 环境 通常 使 用 Tomcat 来 进行 搭建 。 


搭建 Java Web 
开发 环境 .flv 
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| 旧 二 、JDK 的 安装 、 配 置 与 验证 


现 阶段 与 Java 相关 的 基础 平台 都 是 由 Oracle 公司 提供 的 ， 开 发 人 员 可 以 通过 Oracle 
公司 的 网 站 (http://www.oracle.com) 了 解 有 关 Java 的 最 新 技术 ， 并 且 可 以 下 载 相 关 的 软件 。 


(一 ) 安 装 JDK 

(1) 打开 链接 : http:/www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads- 
2133151.html， 进 入 JDK 1.8 下 载 官 网 ， 或 者 直接 进入 百度 搜索 JDK 1.8， 也 可 进入 下 载 官 
网 。 下 载 完 成 后 ， 双 击 jdk_8.0.1310.11_64.exe， 进 入 如 图 2-1 所 示 的 安装 页 面 ， 选 择 3 个 
可 选 功能 ， 进 行 安装 ， 如 需 更 改 安装 目录 ， 单 击 下 边 右 侧 的 “更 改 ” 按 钮 即 可 。 


期 Java SE Development Kit 8 Update 131 (64-bit) - 定制 安装 x 
« 
三 "java 
从 下 面 的 列表 中 装 的 可 选 功能 。 您 可 以 在 安装 后 使 用 控制 面板 中 的 添加 聘 除 程序 " 
的 
功能 说 明 
夺 | om 
-| 当代 三 JavaPX SDK, 一 个 者 用 RE 以 及 
-| 公共 JRE Java Mission Control 
件 。 和 上 有 
安装 到 : 
Cerogram FlesVavavdkl.8.0_131N WG. 


< 上 =- 步 四 取消 


2-1 选择 JDK 安装 选项 


(2) 设置 安装 目录 为 :di:\Program Files\Java\jdk1.8.0_13 八 ， 如 图 2-2 所 示 。 


捕 Java SE Development Kit 8 Update 131 (64-bit) - 更 改 文件 交 x 


人 
三 java 

浏览 至 新 目标 文件 来 

查找 (: 

EF 你 180_H1 | 国 图 


立 件 夹 名 : 
[dt program FiesVavavakl8.0_131V 


CI 
图 2-2 选择 JDK 安装 目录 
(3) JDK 安装 过 程 中 会 出 现 两 次 安装 提示 : 第 一 次 是 安装 JDK; 第 二 次 是 安装 jre。 
建议 两 个 都 安装 在 同一 个 Java 文件 夹 下 的 不 同文 件 夹 中 (不 能 都 安装 在 Java 文件 夹 的 根 目 
录 下 ，jdk 和 jre 安装 在 同一 文件 夹 会 出 错 )， 如 图 2-3 所 示 。 
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Java 安装 - 目标 文件 突 x 


目标 文件 夹 


单 击 "更改" 以 将 Java 安装 到 其 他 文件 夹 . 


安装 到 : 
Di\program FilesVJava\jdk1.8.0_13T\jre 


更 改 (C)- 


< 上 - 步 B) | | 下 - 步 M> | 


2-3 选择 jre 文件 夹 
(二 ) 配 置 JDK 
安装 完 JDK 后 ， 需 要 配置 JDK 运行 的 环境 变量 ， 具 体操 作 步 又 如 下 。 


(1) 右 击 “计算 机 ”图 标 ， 选 择 “ 属 性 ”一 “高 级 系统 设置 ”一 “高 级 ”一 “环境 变 
量 ” 命 令 ， 如 图 2-4 所 示 。 


系统 变量 (5) 
变量 值 号 
Comspec CAWINDOWS\system32\cmd.exe 
configsetroot CAWINDOWS\ConfigSetRoot 
LNKEVN CNprogram Files (x86)\Internet ExplorerViexplore.exe 
MAVEN_HOME DAProgram Files\apache-maven-3.3.9 
NUMBER_OF PROCESSORS 8 
os Windows NT 


path CNprogramDatavOracleVavaVavapathCNWindows\system32:-，v 


ma | waa | ng] 


2-4 配置 JDK 环境 变量 


(2) 在 “系统 变量 ”对 话 框 中 单 击 “ 新 建 ”按钮 ， 设 置 “ 变 量 名 ”为 JAVA_HOME， 
“变量 值 ”为 D:\Program Files\Java\jdk1.8.0_131， 如 图 2-5 所 示 。 


pe x 
变量 各 (N): JAVA HOME 
EN 

济 洛 目录 (D)-。 济 沪 文件 取消 


图 2-5 配置 JAVA_HOME 环境 变量 


(3) 编辑 Path 环境 变量 。 
在 “编辑 环境 变量 ”窗口 中 分 别 输入 %JAVA_HOME%\bin 和 %JAVA_HOME%\yjre\bin, 
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如 图 2-6 所 示 。 


RF 


CiprcarampatavOracieuavaVavapam 二 


CATAUNA HOMESGbin3CATALINA_HOME3XVIb:KCATALINA_- 


2-6 ”编辑 Path 环境 变量 
(4) 编辑 系统 CLASSPATH 变量 ， 如 图 2-7 所 示 。 
变量 值 填写 “.:%JAVA _HOME%\lib:%JAVA HOME%\lib\dtjar:.%JAVA _HOME%\lib\toolsjar” 
(注意 最 前 面 有 一 个 点 号 )， 系 统 变 量 配置 完毕 。 


站 备 纹 妆 量 x 
变量 名 (N) CLASSPATH 
交 量 值 W: JAVA_HOMESCIb:SJAVA_HOMESANibvdtjarScJAVA HOMESXVibwtealejar 

区 部 上 条 (D).- 到 文件 昌 - EF bs] 


图 2-7 编辑 CLASSPATH 系统 变量 


(5) 检验 是 否 配置 成 功 ， 运 行 cmd 并 输入 java -version， 若 如 图 2-8 所 示 显 示 版 本 信 
息 ， 则 说 明 安装 和 配置 成 功 。 


画 CWWINDOWS\system32\cmd.exe 


2-8 ”检验 是 否 配置 成 功 


三 、 安 装 与 配置 Tomcat 


Tomcat 服务 器 是 当今 使 用 最 广泛 的 ServleWJSP 服务 器 ， 它 运行 稳定 、 性 能 可 靠 ， 是 学 
习 JSP 技术 和 中 小 型 企业 应 用 的 最 佳 选择 。 
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Tomcat 的 主页 地 址 为 http://tomcat.apache.org， 用 户 可 以 通过 该 网 站 的 链接 进入 如 图 2-9 
所 示 的 Tomcat 下 载 页 面 ， 然 后 选择 64 位 安装 版 本 下 载 并 安装 即 可 。 
8.5.24 
Please see the README file for pacaging informarion It exploins what every disvibution contzins 


0 aip pg mds, shal sha512 
o Brgz (ogp mg5, shal, sha512) 


shes12 


shas12) 
ler (ggp mos, shal, sha512 


2-9 Tomcat 下 载 页 面 


Tomcat 安装 路 径 是 : C:\Program Files\Apache Software Foundation\Tomcat 8.0。 

安装 Tomcat 后 ， 在 计算 机 一 属性 一 高 级 一 环境 变量 一 系统 变量 中 添加 以 下 环境 
变量 。 

(1) CATALINA HOME: C:\Program Files\Apache Software Foundation\Tomcat 8.0(TOMCAT 
安装 路 径 )。 

(2) CATALINA BASE: C:\Program Files\Apache Software Foundation\Tomcat 8.0。 

(3) TOMCAT HOME: C:\Program Files\Apache Software Foundation\Tomcat 8.0。 

然后 修改 环境 变量 中 的 CLASSPATH， 把 Tomcat 安装 目录 下 common\lib 目录 下 的 
servlet-apijar 追加 到 CLASSPATH 中 去 ， 修 改 后 的 CLASSPATH 如 下 : 

CLASSPATH=.:%JAVA HOME%\lib\dt.jar:%JAVA HOME%\lib\tools.jar:%CATALINA 
_HOME%\lib\servlet-api.jar。 

接着 可 以 启动 Tomcat， 在 正 浏览 器 中 访问 http://localhost:8080， 如 果 看 到 如 图 2-10 
所 示 的 Tomcat 欢迎 页 面 ， 则 说 明 安装 成 功 了 。 


© leahosting CR 个 | Q 4 
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Home Documentation Configuration Examples Wiki Naiing Lists Find Help 


Apache Tomcat/8.5.24 “WN Pche Software Foundation 


™ Recommended Reading 
Securlty Considerations HOWTO 
Manager Application HOWTO 


Clustering/Session Replication HOW-TO 


Developer Quick Start 
Tomeat Setup lealws & AAA Examples Semet Specificafions 
Fa Web Application J0BC Datasources Tomeat Vorsions 


2-10 Tomcat 安装 成 功 页 面 


小 提示 : Tomcat 有 绿色 版 和 安装 版 两 种 ， 绿 色 版 下 载 之 后 直接 解压 到 某 一 个 目录 ， 然 
后 按照 提示 进行 安装 。 
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四 、 搭 建 MySQL 数据 库 环境 
(一 )MySQL 安装 


MySQL5.0 版 本 是 当前 比较 稳定 的 安装 版 本 。MySQL 的 下 载 地 址 为 http://wwwjb51.net 
softs/2193.html 。 

下 载 完 毕 后 ， 双 击 安装 程序 ， 按 照 操 作 提示 ， 即 可 完成 安装 ， 安 装 步骤 略 。 

(二 ) 安 装 MySQL 图 形 化 管理 工具 一 一 Navicat for MySQL 

Navicat for MySQL 是 一 套 专 为 MySQL 设计 的 高 性 能 数据 库 管 理 及 开发 工具 。 它 可 
以 用 于 任何 版 本 为 3.21 或 以 上 的 MySQL 数据 库 服 务 器 ， 并 支持 大 部 分 MySQL 最 新 版 
本 的 功能 ， 包 括 触发 器 、 存 储 过 程 、 函 数 、 事 件 、 视 图 、 管 理 用 户 等 ， 非 常 适合 专业 人 员 
及 入 门 新 手 使 用 ， 是 一 款 非 常 易学 的 软件 。 软 件 界 面 设计 直观 简洁 ， 兼 容 性 强 ， 支 持 各 种 
编辑 功能 和 数据 管理 。 

课堂 技能 训练 : 

【操作 内 容 】 运 用 已 下 载 好 的 JDK、Tomcat、MySQL 等 软件 工具 ， 配 置 Java Web 开 
发 环境 。 

【操作 要 求 】 

(1) 正确 安装 配置 IDK; 

(2) 正确 安装 配置 Tomcat; 

(3) 正确 安装 配置 MySQL 和 MySQL 图 形 化 管理 工具 一 一 Navicat for MySQL。 


【知识 拓展 】ASP、PHP、JSP 三 种 网 站 开发 技术 比较 


ASP 全 名 为 Active Server Pages， 是 一 个 Web 服务 器 端的 开发 环境 ， 利 用 它 可 以 产生 
和 执行 动态 的 、 互 动 的 、 高 性 能 的 Web 服务 应 用 程序 。ASP 采用 脚本 语言 VBScript(Java 
Script) 作 为 自己 的 开发 语言 。 

PHP 是 一 种 跨 平 台 的 服务 器 端的 谋 入 式 脚本 语言 。 它 大 量 地 借用 C 和 Perl 语言 的 语法 ， 
并 耦合 PHP 自己 的 特性 ， 使 Web 开发 者 能 够 快速 地 写 出 动态 程序 产生 页 面 。 它 支持 目前 
绝 大 多 数 数 据 库 。PHP 是 完全 免费 的 ， 而 且 用 户 可 以 不 受 限制 地 获得 源码 ， 甚 至 可 以 在 其 
中 加 进程 序 员 自己 需要 的 功能 。 

JSP(Java Server Pages) 是 Sun 公司 推出 的 一 种 动态 网 页 技术 。JSP 技术 以 Java 语言 作 
为 脚本 语言 ， 熟 悉 Java 语言 的 人 可 以 很 快 上 手 。 

JSP 本 身 虽 然 也 是 脚本 语言 ， 但 是 却 和 PHP、ASP 有 着 本 质 的 区 别 。PHP 和 ASP 都 是 
由 语言 引擎 解释 执行 程序 代码 ， 而 JSP 代码 却 被 编译 成 Servlet 并 由 Java 虚拟 机 执行 ， 这 
种 编译 操作 仅 在 对 JSP 页 面 的 第 一 次 请 求 时 发 生 。 因 此 普遍 认为 JSP 的 执行 效率 比 PHP 和 
ASP 都 高 。JSP 是 一 种 服务 器 端的 脚本 语言 ， 最 大 的 好 处 就 是 开发 效率 较 高 ，JSP 可 以 使 
用 JavaBean 和 Servlet 来 执行 应 用 程序 所 要 求 的 更 为 复杂 的 处 理 。 但 是 这 种 网 站 架构 因为 
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其 业务 规则 代码 与 页 面 代码 混 为 一 团 ， 不 利于 维护 ， 因 此 并 不 适合 大 型 应 用 的 要 求 ， 取 而 
代 之 的 是 基于 MVC 的 Java Web 架构 。 


第 二 节 利用 Intellij IDEA 创建 Java Web 项 目 


一 、IntelliJ IDEA 简介 


Intelli] IDEA， 是 Java 语言 开发 的 集成 环境 ，Intelli] IDEA 在 业界 
被 公认 为 是 最 好 的 Java 开发 工具 之 一 ， 尤 其 在 智能 代码 助手 、 代 码 自 
动 提示 、 重 构 、J2EE 支持 、 各 类 版 本 工具 (git、svn、github 等 )、 加 加 3 汪 才 
JUnit、CVS 整合 、 代 码 分 析 、 创 新 GUI 设计 等 方面 的 功能 可 以 说 是 超 。 创建 Web 
常 的 。 这 里 我 们 用 的 是 Intelli IDEA 2017.1.15 的 64 位 版 本 。 | 

(1) 创建 一 个 项 目 。 

打开 IDEA， 进 入 如 图 2-11 所 示 的 界面 。 

(2) 选择 Create New Project， 进 入 如 图 2-12 所 示 的 界面 ， 勾 选 Web Appliction(3.1) 复 
选 框 ， 并 确认 已 勾 选 Create web.xml 复 选 框 。 


图 2-11 打开 IDEA 首页 图 2-12” 勾 选 Web Appliction(3.1) 复 选 框 


(3) 单 击 Next 按钮 ， 进 入 如 图 2-13 所 示 的 界面 ， 输 入 项 目 名 称 qzmall 和 项 目 本 地 
位 置 。 

(4) 单 击 Finish 按钮 ， 完 成 项 目 创建 ， 进 入 如 图 2-14 所 示 的 界面 ， 在 web\WEB-INF 
下 创建 两 个 文件 夹 : classes 和 lib。classes 用 来 存放 编译 后 输出 的 class 文件 ，lib 用 于 存放 
第 三 方 jar 包 。 

(5) 配置 文件 夹 路 径 ， 选 择 File 一 Project Structure 命令 ， 进 入 如 图 2-15 所 示 的 界 
面 ， 选 择 左边 菜单 项 Modules， 在 右边 选项 卡 中 选择 Paths， 接 着 选中 Use module compile 
output path 单 选 按钮 ， 将 Output path 设 为 刚刚 创建 的 classes 文件 夹 。 


搭建 网 站 开发 环境 。 第 二 章 


选择 Dependencies 选项 卡 ， 将 Module SDK 设置 为 1.8， 单 击 右 边 的 “+” 号 ， 选 择 1 
Jars or Directories， 选 择 刚刚 创建 的 lib 文件 夹 ， 如 图 2-16 所 示 。 
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2-14 在 web\WEB-INF 下 创建 
两 个 文件 夹 : classes 和 lib 
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2-15 配置 编译 类 文件 夹 


2-16 选择 lib 文件 夹 


紧 接着 选择 jar Directory 选项 ， 如 图 2-17 所 示 ， 完 成 项 目 文件 夹 配置 。 
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2-17 ”配置 jar 包 存放 的 文件 夹 
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(6) 从 网 上 下 载 Tomcat 绿色 版 8.5.8， 把 它 放 在 D:\Program Files 目录 下 ， 打 开 菜 单 
Run， 选 择 Edit Configuration， 单 击 “+” 号 ， 展 开 左 侧 选项 ， 选 择 Tomcat Server 一 Local 


选项 ， 如 图 2-18 所 示 。 
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2-18 配置 Tomcat Server 


(7) 配置 Tomcat 容器 。 


接 上 一 步骤 ， 单 击 Local， 进 入 如 图 2-19 所 示 的 界面 ， 单 击 Tomcat Server， 展 开 右 侧 


菜单 ， 把 Tomcat 服务 器 名 称 更 改 为 qzmall。 
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2-19 设置 Tomcat Server 名 称 


单 击 Application server 右面 的 Configure 按钮 ， 弹 出 Application Servers 窗口 ， 单 击 
Tomcat Home 右边 的 选择 按钮 ， 选 择 本 地 安装 的 Tomcat 目录 ， 如 图 2-20 所 示 ， 然 后 单 击 


OK 按钮 。 


[14) 
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[= We 
图 2-20 配置 Tomcat 安装 目录 


切换 到 Deployment 选项 卡 ， 单 击 绿色 “+” 按 钮 ， 在 旁边 的 Application context 文本 
框 中 输入 /qzmall， 单 击 Apply 按钮 ， 如 图 2-21 所 示 。 
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图 2-21 Deployment 选项 卡 


在 Run/Debug Configurations 对 话 框 的 Server 选项 卡 中 ， 设 置 HTTP port 和 JMX 
port( 默 认 值 即 可 )， 依 次 单 击 Apply 一 OK 按钮 ， 至 此 Tomcat 配置 完成 。 
(8) 编辑 index.jsp 文件 。 代 码 如 下 : 


<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<html> 

<head><title> 第 一 个 web 项 目 </title></head> 

<body> 

Hello,World! 第 一 个 web 项 目 运行 成 功 ! 

</body> 
</html> 


然后 运行 程序 ， 显 示 如 图 2-22 所 示 的 页 面 。 


© | © localhost8080/qzmalV 要 | … 介 上 四 | 刁 
轩 观 1 内 I 加 二 二 PEFR 种 名 13 DFE 
Hello,Worid! 生 一 个 web 项 目 运 行 成 功 ! 


2-22 第 一 个 Web 程序 
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同 二 、 利 用 IntelliJ IDEA 实现 热 部 署 


(1) 打开 qzmall 项 目 ， 选 择 Run 一 Edit Configurations 命令 ， 单 击 Tomcat Server， 选 
择 qzmall， 打 开 如 图 2-23 所 示 的 对 话 框 ， 然 后 在 Server 选项 卡 中 
On frame deactivation 都 选 为 Update classes and resources。 


Ph， 将 On Update action、 
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2-23 IntelliJ IDEA 热 部 署 (一 ) 
(2) 切换 到 Deployment 选项 卡 ， 查 看 Deploy at the server startup 框 中 Tomcat 每 次 所 


运行 的 包 ， 如 果 是 xxxx:war 包 ， 请 更 换 。 单 击 旁边 绿色 加 号 ， 选 择 xxxx:war exploded， 
然后 单 击 红色 减 号 将 xxxx:war 删除 ， 也 就 是 要 让 IDEA 以 exploded 方式 部 署 ， 如 图 2-24 
所 示 。 自 


和 击 OK 按钮 ， 热 部 署 成 功 ， 这 样 就 不 用 


因为 每 次 修改 代码 而 重启 了 。 
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2-24 “Intellij IDEA 热 部 署 ( 二 ) 


第 三 节 ”Java Web 程序 概述 
3 一 、Java Web 程序 的 基本 组 成 


一 个 Java Web 应 用 程序 是 由 一 个 或 多 个 Web 组 件 组 成 的 集合 。 


JavaWeb 程序 
概述 .flv 
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这 些 Web 组 件 一 般 被 打包 在 一 起 ， 并 在 Web 容器 中 运行 。 下 面 是 一 个 典型 Java Web 应 
用 程序 的 组 成 列表 。 


(1) 
(2) 
G3) 
(4) 
G) 
(9) 


Fe 


Servlet。 

在 Web 应 用 程序 中 使 用 的 Java 类 。 

Java Server Pages(JSP). 

JSP 标准 标签 (JSTL) 和 定制 标签 。 

静态 的 文件 ， 包 括 HTML、 图 像 、JavaScript 和 CSS 等 。 
描述 Web 应 用 程序 的 元 信息 (web.xml)。 


| 加 二 、Java Web 程序 的 目录 结构 


Java Web 程序 的 目录 结构 如 图 2-25 所 示 。 
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2-25 Java Web 程序 的 目录 结构 


(一 )src 目录 结构 
src 目录 下 放 的 是 各 种 java 包 。 


(1) 
(CO) 
G3) 
(4 
(G5) 


cart: 购物 车 类 包 。 

dao: 数据 访问 层 类 包 。 

db: 数据 库 。 

entity: 与 各 个 表 相对 应 的 实体 类 包 。 
filter: 过 滤器 类 包 。 


了 
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(6) service: 业务 层 类 包 。 

(7) servlet: 控制 器 包 。 

(8) test: 测试 包 。 

(9) util: 工具 包 。 

(10) c3p0-config.xml: 数据 库 配置 文件 。 


(二 )web 目录 结构 


web 目录 下 放 的 都 是 与 视图 层 有 关 的 文件 和 目录 。 

(1) admin: 放置 后 台 操作 的 jsp 文件 和 各 种 图 片 、css、js 文件 。 
(2) css: 放置 样式 文件 。 

(3) fonts: 放置 字体 和 图 标 文件 。 

(4) img: 放置 图 片 文件 。 

(5) js: 放置 js 文件 。 

(6) classes: 放置 编译 文件 。 

(7) lib: 放置 各 种 jar 包 。 


小 提示 : 运用 web.xml 配置 网 站 首页 
welcome-file-list 是 一 个 配置 在 web.xml 中 的 欢迎 页 ， 用 于 当 用 户 在 url 中 输入 工程 名 
称 或 者 输入 Web 容器 url( 如 http://localhost:8080/) 时 直接 跳 转 到 的 页 面 。 代 码 如 下 : 


<welcome-file-list> 
<welcome-file>index.html</welcome-file> 
<welcome-file>index.jsp</welcome-file> 
</welcome-file-list> 


| 辣 三 、 在 IDEA 里 建立 包 、 接 口 类 、 接 口 实现 类 、servlet 

由 于 IDEA 是 Java 语言 开发 的 集成 环境 ， 所 以 建立 包 、 接 口 类 、 接 口 实现 类 、servlet 
相 比 其 他 软件 就 容易 得 多 。 

(一 ) 在 IDEA 里 建立 包 ec 


(1) 打开 IDEA， 进 入 qzmall 应 用 程序 ， 右 击 src 目录 ， 选 择 New 一 Package 命令 ， 如 
图 2-26 所 示 。 
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2-26 新建 包 
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(2) 弹出 如 图 2-27 所 示 的 对 话 框 ， 输 入 包 名 ec 即 可 。 
(二 ) 在 ec 包 下 新 建 接口 类 IEcshop 


右 击 ec 包 ， 选 择 New 一 Java Class 命令 ， 弹 出 如 图 2-28 所 示 的 对 话 框 ， 输 入 
IEcshop， 将 Kind 项 设置 为 Interface。 


Name: [IEcshcp 


Knd: Interface "| 
EN Ea Eo 


图 2-27 输入 包 名 ec 图 2-28 建立 接口 类 IEcshop 


(三 ) 在 ec 包 下 建立 Servlet-EcShopServlet 
右 击 ec 包 ， 选 择 New 一 Servlet 命令 ， 输 入 名 称 EcShopServlet 即 可 。 
(四 ) 在 ec 包 下 建立 过 滤器 Filter 一 EcShopFilter 
右 击 ec 包 ， 选 择 New 一 Filter 命令 ， 输 入 名 称 EcShopFilter 即 可 。 
课堂 技能 训练 : 
【操作 内 容 】 建 立 qzmall 应 用 程序 ， 按 照 图 2-20 的 要 求 ， 建 立 相 应 的 包 和 文件 夹 ， 
并 进行 热 部 署 。 
【操作 要 求 】 
(1) 建立 qzmall 应 用 程序 。 
(2) 在 web/WEB-INF 目录 下 创建 两 个 文件 夹 : classes 和 lib，classes 用 来 存放 编译 后 
输出 的 class 文件 ，lib 用 于 存放 第 三 方 jar 包 。 


(3) 建立 包 、 类 、Servlet。 
(4) 热 部 署 。 


第 四 节 ”Servlet 基础 知识 
| 站 一 、 什 么 是 Servlet 


Java Servlet 是 运行 在 Web 服务 器 或 应 用 服务 器 上 的 程序 ， 它 是 作为 来 自 Web 浏览 
器 或 其 他 HITP 客户 端的 请 求 和 HITP 服务 器 上 的 数据 库 或 应 用 程序 之 间 的 中 间 层 。 使 
用 Servlet， 可 以 收集 来 自 网 页 表单 的 用 户 输入 ， 呈 现 来 自 数据 库 或 者 其 他 源 的 记录 ， 还 可 
以 动态 创建 网 页 。 
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(一 )Servlet 的 主要 任务 


(1) 读 取 客户 端 (浏览 器 ) 发 送 的 显 式 的 数据 。 包 括 网 页 上 的 HIML 表单 ， 也 可 以 是 
来 自 Applet 或 自 定义 的 HTTP 客户 端 程序 的 表单 。 

(2) 读 取 客户 端 (浏览 器 ) 发 送 的 隐 式 的 HTTP 请 求 数据 。 包 括 Cookies、 媒 体 类 型 和 
浏览 器 能 理解 的 压缩 格式 等 。 

(3) 处 理 数据 并 生成 结果 。 这 个 过 程 可 能 需要 访问 数据 库 ， 执 行 RMI 或 CORBA 调 
用 ， 调 用 Web 服务 ， 或 者 直接 计算 得 出 对 应 的 响应 。 

(4) 发 送 显 式 的 数据 ( 即 文档 ) 到 客户 端 (浏览 器 )。 该 文档 的 格式 可 以 是 多 种 多 样 的 ， 包 
括 文 本 文件 (HTML 或 XML)、 二 进 制 文件 (GIF 图 像 )、Excel 等 。 

(5) 发 送 隐 式 的 HTTP 响应 到 客户 端 (浏览 器 )。 包 括 告诉 浏览 器 或 其 他 客户 端 被 返回 
的 文档 类 型 (如 HIML)， 设 置 Cookies 和 缓存 参数 ， 以 及 其 他 类 似 的 任务 。 


(二 )Servlet 的 生命 周期 


Servlet 的 生命 周期 可 被 定义 为 从 创建 直到 毁灭 的 整个 过 程 。 以 下 是 Servlet 遵循 
的 过 程 。 

(1) Servlet 通过 调用 init 0 方法 进行 初始 化 。 

(2) Servlet 调用 service() 方 法 来 处 理 客户 端的 请 求 ， 对 每 个 请 求 均 执行 service() 方 
法 。service() 方法 由 容器 调用 ，service 方法 在 适当 的 时 候 调 用 doGet、doPost、doPut、 
doDelete 等 方法 。 因 此 ， 程 序 员 不 用 对 service() 方 法 做 任何 处 理 ， 只 需要 根据 来 自 客户 端 
的 请 求 类 型 来 重 写 doGet() 或 doPost() 即 可 。 

(3) Servlet 通过 调用 destroy0) 方法 终止 (结束 )。 


(三 )Servlet 三 大 作用 域 
在 Java Web 开发 中 ，Servlet 有 三 大 域 对 象 的 应 用 : request、session、application。 


1. request 

request 表示 一 个 请 求 ， 只 要 发 出 一 个 请 求 就 会 创建 一 个 request， 它 的 作用 域 仅 在 当前 
请 求 中 有 效 。 

用 处 : 常用 于 服务 器 间 同 一 请 求 不 同 页 面 之 间 的 参数 传递 ， 以 及 表单 的 控件 值 传递 。 


2. session 

服务 器 会 为 每 个 会 话 创建 一 个 session 对 象 ， 所 以 session 中 的 数据 可 供 当 前 会 话 中 所 
有 Servlet 共享 。 

从 用 户 打开 浏览 器 会 话 开始 ， 直 到 关闭 浏览 器 会 话 才 会 结束 。 一 次 会 话 期 间 只 会 创建 
一 个 session 对 象 。 


用 处 : 常用 于 Web 开发 中 的 登录 验证 界面 ( 当 用 户 登 录 成 功 后 浏览 器 分 配 其 一 个 
session 键 值 对 )。 
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session 是 服务 器 端 对 象 ， 保 存在 服务 器 端 。 并 且 服 务 器 可 以 将 创建 session 后 产生 的 
sessionid 通过 一 个 cookie 返回 给 客户 端 ， 以 便 下 次 验证 。 


3. Application(ServletContext) 


作用 范围 : 所 有 的 用 户 都 可 以 取得 此 信息 ， 此 信息 在 整个 服务 器 上 被 保留 。 
Application 属性 范围 值 只 要 设置 一 次 ， 则 所 有 的 网 页 窗口 都 可 以 取得 数据 。ServletContext 
在 服务 器 启动 时 创建 ， 在 服务 器 关闭 时 销毁 ， 一 个 Java Web 应 用 只 创建 一 个 
ServletContext 对 象 ， 所 有 的 客户 端 在 访问 服务 器 时 都 共享 同一 个 ServletContext 对 象 。 
ServletContext 对 象 一 般 用 于 在 多 个 客户 端 则 共享 数据 时 使 用 。 

获取 Application 对 象 的 方法 (Servlet 中 ): 


ServletContext app01 = this.getServletContext (); 
app01.setAttribute ("name", "kaixuan"); /7 设置 一 个 值 进 去 


服务 器 只 会 创建 一 个 ServletContext 对 象 ， 所 以 app01 就 是 app02， 通 过 app01 设置 的 
值 当然 可 以 通过 app02 获取 。 代 码 如 下 : 


ServletContext app02 = this.getServletContext (); 
app02.getAttribute ("name"); // 获 取 键 值 对 


| 司 二 、Servlet 基本 架构 
Servlet 基本 架构 的 代码 如 下 : 


QWebServlet (name = "ClassNameServlet",urlPatterns = "/class.do") 
public class ClassNameServlet extends HttpServlet { 
public void init() throws ServletException { 


// 初 始 化 代码 . . . 


} 
protected void doPost (HttpServletRequest reqg, HttpServletResponse 
resp) throws ServletException, IOException { 
//Servlet 代码 
二 
protected void doGet (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
//Servlet 代码 
} 
public void destroy() { 
// 终 止 化 代码 . . . 
} 
. 


【代码 说 明 】 
(1) @WebServlet(name = "ClassNameServlet",urlPatterns = "class.do") 是 采用 注解 方式 
配置 Servlet， 要 求 版 本 必须 是 Servlet 3.0 以 上 版 本 。 多 数 Servlet 在 实际 应 用 中 ，init0 和 
destroy() 一 般 不 用 写 在 里 
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(2) GET 请 求 来 个 URL 的 正常 请 求 ， 或 者 来 自 一 个 未 指定 METHOD 的 
HTML 表单 ， 它 由 doGet0 方 法 处 理 。POST 请 求 来 自 一 个 特别 指定 了 METHOD 为 
POST 的 HTML 表单 ， 它 由 doPost() 方 法 处 理 。 


小 提示 : get 提交 和 post 提交 有 何 区 别 

(1) get 一 般 用 于 从 服务 器 上 获取 数据 ; post 一 般 用 于 向 服务 器 传送 数据 。 

(2) 请 求 的 时 候 参 数 的 位 置 有 区 别 。get 的 参数 是 拼接 在 url 后 面 ， 用 户 在 浏览 器 地 址 
栏 可 以 看 到 ; post 的 参数 是 放 在 http 包 的 包 体 中 。 

比如 用 户 注册 ， 不 能 把 用 户 提交 的 注册 信息 用 get 的 方式 ， 否 则 就 相当 于 把 用 户 的 注 
册 信息 都 显示 在 url 上 了 ， 是 不 安全 的 。 

(3) 能 提交 的 数据 有 区 别 。get 方式 能 提交 的 数据 只 能 是 文本 ， 且 大 小 不 超过 1024 字 
节 ; 而 post 不 仅 可 以 提交 文本 ， 还 可 以 提交 二 进 制 文件 。 

所 以 ， 上 传 文件 就 需要 使 用 post 请 求 方式 。 

(4) Servlet 在 处 理 请 求 的 时 候 分 别 使 用 doGet 和 doPost 方式 进行 处 理 请 求 。 


第 五 节 大 型 企业 的 网 站 开发 模式 
日 一 、JSP Model1 


(一 ) 传 统 的 JSP Model1 
JSP 是 独立 的 ， 自 主 完成 所 有 的 任务 ， 如 图 2-29 所 示 。 


request 
浏览 器 


response 


2-29 传统 的 JSP Model1 


(二 ) 改 进 的 JSP Model1 
JSP 页 面 与 JavaBeans 共同 协作 完成 任务 ， 如 图 2-30 所 示 。 
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2-30 改进 的 JSP Model1 
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(三 )JSP Model1 的 优点 

这 种 架构 模型 非常 适合 开发 业务 逻辑 不 太 复 杂 的 小 型 Web 项 目 ， 而 且 对 Java Web 
发 人 员 的 技术 水 平 要 求 不 高 。 在 这 种 模式 下 ，JavaBeans 用 于 封装 业务 数据 ，JSP 既 负责 处 
理 用 户 请 求 ， 又 显示 数据 。 

(四 )JSP Model1 的 缺点 

1. HTML 和 Java 强 耦 合 在 一 起 ， 导 致 页 面 设计 与 逻辑 处 理 无 法 分 离 

大 量 使 用 这 种 模式 ， 常 会 导致 在 JSP 页 面 中 嵌入 大 量 的 Java 代码 ， 当 需要 处 理 的 商业 
逻辑 非常 复杂 时 ， 这 种 情况 就 会 变 得 很 糟糕 。 

2. 可 读 性 差 ， 调 试 困难 ， 不 利于 维护 


大 量 的 Java 代码 使 得 JSP 页 面 变 得 非常 腔 肿 ， 可 读 性 差 。 前 端的 页 面 设 计 人 员 稍 有 不 
慎 ， 就 有 可 能 破坏 关系 到 商业 逻辑 的 代码 。 这 造成 了 代码 开发 和 维护 的 困难 。 


3. 功能 划分 不 清 


这 种 情况 若 在 大 型 项 目 中 同时 出 现 ， 会 功能 划分 不 清 ， 导 致 项 目 管理 的 困难 。 因 此 ， 
这 种 模式 只 适用 于 中 小 规模 的 项 目 。 


上 则 二 、JSP Model2 


(一 )JSP Model2 中 使 用 了 三 种 技术 : JSP、Servlet 和 JavaBeans 


(1) JSP 负责 生成 动态 网 页 ， 只 用 作 显 示 页 面 。 
(2) Servlet 负责 流程 控制 ， 用 来 处 理 各 种 请 求 的 分 派 。 
(3) JavaBeans 负责 业务 逻辑 和 对 数据 库 的 操作 。 


(二 ) 使 用 JSP Model2 的 交互 过 程 


用 户 通过 浏览 器 向 Web 应 用 中 的 Servlet 发 送 请 求 ，Servlet 接收 到 请 求 后 实例 化 
JavaBeans 对 象 ， 调 用 JavaBeans 对 象 的 方法 ，JavaBeans 对 象 返 回 从 数据 库 中 读 取 的 数 
据 。Servlet 选择 合适 的 JSP， 并 且 把 从 数据 库 中 读 取 的 数据 通过 这 个 JSP 进行 显示 ， 最 后 
JSP 页 面 把 最 终 的 结果 返回 给 浏览 器 ， 如 图 2-31 所 示 。 
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2-31 JSP Model2 的 交互 过 程 
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(三 )JSP Model2 的 优点 

(1) 消除 了 JSP Modell 的 缺点 。 

(2) 该 模式 适合 多 人 合作 开发 大 型 的 Web 项 目 。 

(3) 各 司 其 职 ， 互 不 干涉 。 

(4) 有 利于 开发 中 的 分 工 。 

(5) 有 利于 组 件 的 重用 。 

(四 )JSP Model2 的 缺点 

Web 项 目的 开发 难度 加 大 ， 同 时 对 开发 人 员 的 技术 要 求 也 提高 了 。 
| 则 三 、Mvc 模式 

(一 )MVC 模式 的 概念 


MVC(Model-View-Controller) 模 式 通 过 JSP 技术 来 表现 页 面 ， 通 过 Servlet 技术 来 完成 
大 量 的 事务 处 理工 作 ， 实 现 用 户 的 商业 逻辑 。 

在 这 种 模式 中 ，Servlet 用 来 处 理 请 求 的 事务 ， 充 当 了 控制 器 (Controller) 的 角色 ， 它 负 
责 响应 客户 对 业务 逻辑 的 请 求 并 根据 用 户 的 请 求 行为 ， 决 定 将 哪个 JSP 页 面 发 送 给 客户 。 
JSP 页 面 处 于 表现 层 ， 也 就 是 视图 (View) 的 角色 。JavaBeans 则 负责 数据 的 处 理 ， 也 就 是 模 
型 (Model) 的 角色 。 

ServlettJSP+JavaBeans(MVC) 模 式 适 合 开 发 复杂 的 Web 应 用 。 在 这 种 模式 下 ，Servlet 
负责 处 理 用 户 请 求 ，JSP 负责 数据 显示 ; JavaBeans 负责 封装 数据 。Servlet+JSP+JavaBeans 
模式 的 程序 各 个 模块 之 间 层 次 清晰 ，Web 开发 推荐 采用 此 种 模式 。 


(二 )MVC 模式 的 优点 


大 部 分 用 语言 如 ASP、PHP 开发 出 来 的 Web 应 用 ， 初 始 的 开发 模板 就 是 混合 层 的 数 
据 编程 。 例 如 ， 直 接 向 数据 库 发 送 请 求 并 用 HIML 显示 ， 开 发 速度 往往 比较 快 ， 但 由 于 数 
据 页 面 的 分 离 不 是 很 直接 ， 因 而 很 难 体现 出 业务 模型 的 样子 或 者 模型 的 重用 性 。 产 品 设计 
弹性 力度 很 小 ， 很 难 满足 用 户 的 变化 性 需求 。MVC 要 求 对 应 用 分 层 ， 虽 然 要 处 理 额 外 的 
工作 ， 但 产品 的 结构 清晰 ， 产 品 的 应 用 通过 模型 可 以 得 到 更 好 的 体现 。 

最 重要 的 是 应 该 有 多 个 视图 对 应 一 个 模型 的 能 力 。 在 目前 用 户 需 求 快速 变化 的 情况 
下 ， 可 能 有 多 种 方式 访问 应 用 的 要 求 。 例 如 ， 订 单 模型 可 能 有 本 系统 的 订单 ， 也 有 网 上 订 
单 ， 或 者 其 他 系统 的 订单 ， 但 对 于 订单 的 处 理 都 是 一 样 的 。 按 MVC 设计 模式 ， 一 个 订单 
模型 以 及 多 个 视图 即 可 解决 问题 。 这 样 减少 了 代码 的 复制 和 代码 的 维护 量 ， 一 旦 模型 发 生 
改变 ， 也 易于 维护 。 
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课 后 训练 


一 、 选 择 题 
1. 关于 Eclipse 与 IDEA 的 不 同 ， 下 列 选项 中 正确 的 是 (。 )。 
A. IDEA 可 管理 多 个 项 目 
B. IDEA 进行 专 一 的 项 目 管理 
C. Eclipse 是 一 个 开放 的 环境 ， 可 进行 多 项 目 管理 
D. Eclipse 是 精准 的 单一 项 目 管理 
2. 在 使 用 IDEA 开发 工具 时 ， 如 果 需 要 将 代码 结构 补 全 ， 需 要 使 用 ( ”) 组 合 键 。 


A. Ctrl +ShifttSpace B. Ctrl+Alt 

C. Ctrl +Shift+Alt D. Ctrl +Shift+Enter 
3. 在 IDEA 中 遇 到 项 目 乱码 问题 ， 应 该 怎么 处 理 ? (  ) 

A. 将 乱码 代码 或 者 注释 去 掉 B. 改变 单个 文件 的 编码 方式 

C. 不 予 理 会 D. 改变 整个 项 目 环境 的 编码 方式 
4. 在 IDEA 创建 中 ，Java 项 目的 源 程序 存在 于 哪个 文件 夹 T? (  ) 

A. src B. idea C. out D. WEB-INF 


5. 在 Java Web 应 用 开发 中 ， 如 果 客 户 端的 每 次 请 求 均 调用 Servlet， 则 每 次 调用 都 会 
执行 Servlet 生命 周期 中 的 ( ) 方 法 。 
A. init() B. destroy() C. service() D. close0 
6. 在 JavaEE 中 ， 初 始 化 Servlet 实例 的 时 候 ，init(0 方 法 是 ( 。 )。 
A. 由 程序 员 编 写 代码 来 调用 执行 
B. 每 次 执行 当前 的 Servlet 时 ， 由 系统 自动 执行 
C. 当 第 一 次 执行 当前 的 Servlet 时 ， 由 系统 自动 执行 
D. 以 上 说 法 都 不 对 
7. 在 Java Servlet API 中 ，HttpServletRequest 接口 的 (  ) 方 法 用 于 返回 与 当前 请 求 相 
关联 的 会 话 ， 如 果 没 有 ， 则 返回 null。 
A. getSession() B. getSession(true) 
C. getSession(false) D. getSession(null) 
8. 关于 会 话 属性 ， 以 下 说 法 正确 的 是 ( 。 )。 
A. HttpSession.getAttribute(String) 的 返回 类 型 是 Object 
B. HttpSession.getAttribute(String) 的 返回 类 型 是 String 
C. 在 一 个 HttpSession() 上 调用 setAttribute("key", "value") 时 ， 如 果 这 个 会 话 中 对 
应 属性 key 已 经 有 一 个 值 ， 就 会 导致 一 个 异常 
D. 在 一 个 HttpSession() 上 调用 setAttribute("key"，"value") 时 ， 如 果 这 个 会 话 中 对 
应 属性 key 已 经 有 一 个 值 ， 则 会 导致 这 个 属性 原先 的 值 被 String value 替换 
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9 如果 做 动态 网 站 的 开发 ， 以 下 ( ， ) 可 以 作为 服务 器 端 脚本 语言 。 


A.HIML B. JSP C. JavaScript D. Java 
10. 在 运行 Web 项 目 时 ， 正 提示 “404 错误 ”， 可 能 的 原因 包括 ( 。 )。 
A. 未 启动 Tomcat 服务 B. 未 部 署 Web 项 目 


C. URL 中 的 上 下 文 路 径 书写 错误 D. URL 中 的 文件 名 书写 错误 
11. 在 MVC 模式 体系 结构 中 ，( ”) 是 实现 控制 器 的 首选 方案 。 


A. JavaBeans B. Servlet C.JSP D. HIML 
12. 编写 Servlet 的 doPost 方法 时 ， 需 要 抛 出 的 异常 为 ( 闫 
A. ServletException, IOException B. ServletException, RemoteException 


C. HttpServletException, IOException D. HttpServletException, RemoteException 
13. 使 用 MVC 模式 设计 的 Web 应 用 程序 具有 以 下 优点 , 除了 (  )。 
A. 可 维护 性 强 。 B. 可 扩展 性 强 C. 代码 重复 较 少 D. 大 大 减少 代码 量 
14. 在 MVC 模式 中 ，( ”) 层 专用 于 客户 端 应 用 程序 的 图 形 数 据 表 示 ， 与 实际 数据 处 
理 无 关 。 
A. 模型 B. 视图 C. 控制 器 D. 数据 


二 、 实 际 操作 题 
配置 Java Web 开发 环境 ， 建立 应 用 程序 并 建立 相应 的 包 和 文件 夹 ， 最 后 进行 热 部 署 。 


第 二 章 构建 网 站 开发 环境 .pptx 第 二 章 习题 答案 .docx 
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第 三 草 


Qzmall 电子 商城 系统 设计 


电子 商务 网 站 建设 企业 案例 


知识 能 力 目标 
1. 了 解 Qzmall 电子 商城 系统 基本 设计 思想 。 
2. 掌握 数据 库 设计 ， 掌 握 主键 、 外 键 的 含义 以 及 触发 器 的 作用 。 
3. 理解 过 滤器 的 作用 。 
4. 学 会 数据 库 设计 和 表 设 计 ， 学 会 设置 主键 、 外 键 ， 学 会 触发 器 的 设置 。 
5. 学 会 配置 数据 库 连 接 。 
6.、 学 会 配置 过 滤器 。 
[问题 提示 |】 


建设 网 上 商城 之 前 ， 首 先 要 了 解 用 户 的 需求 ， 确 定 商城 的 基本 功能 ， 需 要 通过 数据 库 
来 实现 和 用 户 进行 交互 的 复杂 的 商品 显示 、 查 找 、 登 录 、 购 物 等 功能 。 
问题 : 建立 一 个 网 站 商城 需要 有 哪些 表 ? 表 与 表 之 间 的 关系 是 什么 ? 


第 一 节 Qzmall 电子 商城 系统 概述 


| 间 一 、 前 台 购物 系统 


(一 ) 商 品 展示 /搜索 

(1) 商品 查询 。 根 据 查询 条 件 查询 所 有 符合 条 件 的 商品 信息 。 查 询 商 品 流程 : 用户 输 
入 查询 条 件 并 提交 查询 ， 系 统 根据 用 户 提交 的 查询 条 件 从 数据 库 中 查询 商品 并 输出 。 

(2) 商品 展示 。 首 页 显示 本 网 站 的 最 新 商品 。 

(3) 商品 浏览 。 输 入 需要 查看 信息 的 种 类 ， 查 看 该 类 型 的 所 有 产品 。 

(4) 商品 详情 。 可 以 看 到 商品 的 详细 信息 ， 如 商品 名 称 、 图 片 、 价 格 、 基 本 参数 。 

(二 ) 购 物 车 /订单 

(1) 加 入 购物 车 。 注 册 用 户 可 以 在 浏览 商品 的 过 程 中 ， 把 需要 购买 的 商品 放置 在 一 起 
付款 ， 单 击 商品 下 方 的 “加 入 购物 车 ”按钮 即 可 把 商品 加 入 购物 车 。 

(2) 购物 车 查询 。 用 户 在 购物 过 程 中 可 以 随时 查看 购物 车 中 的 商品 ， 以 了 解 所 选 购 的 
商品 信息 。 

(3) 注册 用 户 选 购 商品 后 ， 在 确认 购买 之 前 ， 可 以 对 购物 车 的 商品 进行 二 次 选择 ， 既 
可 以 删除 购物 车 中 不 要 的 商品 ， 也 可 以 修改 购物 车 中 的 商品 购买 数量 。 

(4) 在 用 户 确认 购买 后 ， 系 统 会 为 注册 用 户 生成 购物 订单 ， 注 册 用 户 可 以 查看 自己 的 
订单 信息 以 了 解 付款 信息 和 商品 配送 情况 。 

(5) 查询 、 修 改 订单 状态 。 用 户 登 录 成 功 后， 可 以 修改 订单 状态 ， 如 付款 、 收 货 等 。 

(6) 取消 订单 。 用 户 在 未 付款 之 前 ， 可 以 取消 订单 。 

(7) 订单 查询 。 用 户 登录 后 ， 可 以 浏览 或 查询 本 人 订单 。 
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(三 ) 会 员 


(1) 注册 。 系 统考 虑 到 用 户 购买 信息 的 真实 性 ， 规 定 访客 只 能 在 系统 中 查看 商品 信 
息 ， 不 能 进行 商品 的 订购 。 但 是 访客 可 以 进行 注册 ， 登 记 相关 基 本 信息 ， 成 为 系统 的 注册 
用 户 。 

(2) 登录 。 用 户 输入 用 户 名 及 用 户 密码 可 以 进行 登录 。 

(3) 信息 修改 。 用 户 登录 之 后 修改 自己 的 账号 、 密 码 及 其 他 个 人 信息 。 


I 国 二 、 后 台 功能 需求 
(一 ) 商 品 分 类 维护 
管理 员 进 入 后 台 系 统 后 可 以 对 商品 分 类 信息 进行 增 、 删 、 改 、 查 。 
(二 ) 商 品 维护 


管理 员 进 入 系统 后 可 以 添加 商品 信息 、 修 改 已 有 商品 信息 、 查 询 商 品 信息 和 查询 某 类 
及 某 件 商品 信息 。 
(三 ) 订 单 
订单 是 用 户 在 前 台 购物 过 程 中 生成 的 ， 后 台 管 理 员 可 以 对 已 付款 订单 进行 订单 状态 修 
同时 根据 订单 情况 通知 物流 配送 人 员 进 行商 品 配送 。 
(四 ) 商 品 库存 维护 
商品 库存 会 随 着 订单 的 完成 而 减少 ， 管 理 员 可 以 为 缺 货 商 品 添加 库存 ， 并 能 查看 单个 
商品 的 库存 周转 记录 。 

课堂 技能 训练 : 

【 实 训 操 作 内 容 】 登 录 淘宝 、 京 东 、 苏 宁 等 购物 网 站 ， 分 析 这 些 网 站 主要 有 哪些 功 


能 ， 并 比较 它们 功能 的 异同 。 
【 实 训 操 作 要 求 】 必 须 写 出 每 个 网 站 相 比 于 其 他 电子 商务 网 站 有 哪些 特色 。 


第 二 节 ”设计 并 创建 电子 商城 系统 数据 库 


本 系统 采用 数据 库 管理 系统 MySQL 管理 商品 、 分 类 、 会 员 、 
订单 、 购 物 车 等 数据 。 数 据 库 表 的 结构 设计 是 应 用 软件 中 的 关键 部 
分 ， 数 据 库 表 设 计 采 用 规范 化 关系 模式 的 方法 。 在 关系 数据 库 中 
规范 化 关系 模式 就 是 要 解决 关系 模式 中 存在 的 插入 异常 、 删 除 异 
常 、 修 改 复杂 、 数 据 元 余 等 问题 。 规 范 化 的 基本 思想 是 消除 数据 依 。 下 的 全 全 
赖 中 不 合适 的 部 分 ， 使 模式 中 的 各 关系 模式 达到 某 种 程度 的 “分 。” 没 计 并 他 建 men 
离 ”， 让 一 个 关系 描述 一 个 概念 、 一 个 实体 或 者 实体 间 的 一 种 联 | 


腔 


区 
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系 ， 若 多 于 一 个 概念 就 把 它 分 离 出 去 。 
一 、MySQL 外 键 设 置 方式 


(一 )cascade 方式 


在 父 表 上 update/delete( 更 新 或 删除 ) 记 录 时 ， 同 步 update/delete 子 表 的 匹配 记录 。 
(二 )set null 方式 


在 父 表 上 update/delete 记录 时 ， 将 子 表 上 匹配 记录 的 列 设 为 null。 
要 注意 子 表 的 外 键 列 不 能 为 not null。 


(三 )no action 方式 
如 果子 表 中 有 匹配 的 记录 ， 则 不 允许 对 父 表 对 应 候选 键 进行 update/delete 操作 。 
(四 )restrict 方式 
同 no action， 都 是 立即 检查 外 键 约束 。 
(五 )set default 方式 
父 表 有 变更 时 ， 子 表 将 外 键 列 设置 成 一 个 默认 的 值 ， 但 InnoDB 不 支持 此 方式 。 
二 、Qzmall 数据 库 表 
根据 系统 功能 描述 和 实际 业务 分 析 ， 进 行 Qzmall 电子 商城 系统 的 设计 ， 其 主要 数据 
及 其 内 容 如 表 3-1 一 表 3-10 所 示 。 
表 3-1 商品 大 类 表 (category) 


存储 商品 大 类 信息 
字段 类 型 


int( 自 动 增长 


Varchar 


表 序号 


subcate 


| 存储 商品 子 类 信息 ip 


int( 自 动 增长 ) 


int 


主键 大 类 编号 
外 键 (category) 大 类 编号 
小 类 名 称 


cid 


varchar 
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表 3-3 商品 信息 表 (shop) 


第 三 章 


表 序 号 “| 3 i 
合 义 存储 商品 信息 Category subcate 
字段 名 类 型 刍 别 说 明 
pid int( 自 动 增长 ) 11 主键 商品 编号 
cid int 11 外 键 (category) 大 类 编号 
sid int 11 外 刍 (subcate) 小 类 编号 
shopname | varchar 40 商品 名 称 
shopinfo varchar 100 基本 信息 
price float 8.1 价格 
stock int 11 库存 
shopdate “| varchar 20 上 架 时 间 
imagel varchar 100 图 片 1 
image2 Varchar [io | 图 片 2 
image3 Varchar | io | 图 片 3 
description | varchar 说 明 
表 3-4 订单 主 表 (orders) 
表 序号 4 orders 
含义 存储 订单 主要 信息 User 
字段 名 类 型 键 别 说 明 
orderId varchar 主键 订单 编号 
username varchar 外 键 (user) 会 员 名 
truename varchar 真实 姓名 
Postcode varchar 邮编 
addtime varchar 时 间 
phone varchar 手机 
address Varchar 数量 
sum float 总 价 
state int 订单 状态 
表 3-5 订单 明细 表 (ordersitem) 
表 序 号 5 ordersitem 
含义 存储 订单 明细 信息 Orders shop 
字段 名 类 型 键 别 说 明 
oid int( 自 动 增长 ) 主键 编号 
orderId Varchar 外 键 (orders) 订单 编号 


31 


八 片 十 着 翌 郧 【出 川 十 上 才 了 双 澡 驯 男 悄 


电子 商务 网 站 建设 企业 案例 


类 型 


续 表 


说 明 


int 


外 键 (shop) 


商品 编号 


表 3-6 用 户 信息 表 (user) 


商品 名 称 


表 序 号 6 表 名 User 
含义 存储 用 户 明 细 信 息 关联 表 
字段 名 类 型 长 度 键 别 说 明 

username varchar 30 E 键 编号 
password varchar 50 支付 方式 
truename varchar 20 真实 姓名 
postcode varchar 6 邮编 
adddate varchar 20 时 间 
phone varchar 11 手机 
address varchar 100 数量 
point int 11 积分 

uestion varchar 10 密 保 问题 
birthda varchar 10 生日 
ansWeT Varchar 30 答案 


存储 广告 


字段 类 型 


描述 


| jt 自动 增长 ) 


表 3-8 会 员 积 分 表 (point) 


广告 图 片 
上 架 时 间 


8 
| 存储 会 员 积 分 记录 


字段 名 | 字段 类 型 描述 
i int( 自 动 增长 ) 导 


username 会 员 名 
orderId 外 键 订单 编号 
pointtime 积分 时 间 


description 
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表 3-9 商品 库存 记录 表 (stockitem) 


9 stockitem 


背光 存储 商品 库存 记录 shop 

字段 名 字段 类 型 键 别 描述 
stockid int( 自 动 增长 ) 主键 库存 编号 
pid int 外 键 商品 编号 


int 


存储 商品 大 类 信息 


字段 类 型 


Varchar 


三 、 设 置 触发 器 


表 :point 
类 型 : 插入 <!---insert---> 描 述 本 表 插入 记录 的 同时 ， 更 新 user 表 的 point 字段 值 
begin 


declare c int; 

set c = (select point from user where username=new.username); 

update user set point = c + new.mypoint where username = new.username; 
end 

类 型 : 删除 <!---delete---> 描 述 本 表 删 除 记录 的 同时 ， 更 新 user 表 的 point 字段 值 
begin 

declare c int; 

set c = (select point from user where username=old.username); 

update user set point = c - old.mypoint where Username = old.username; 
end 

表 : stockitem 

触发 器 名 称 : adstockItem 

类 型 : 插入 <!---insert---> 描 述 插入 记录 的 同时 ， 商 品 表 对 应 商品 的 库存 应 增加 同样 的 数量 


begin 
declare c int; 
set c = (select stock from shop where pid=new.pid); 


update shop set stock = c+ new.shopnum where pid = new.pid; 

end 

触发 器 名 称 : destockItem 

类 型 : 删除 <!---delete---> 描述 删除 记录 的 同时 ， 商 品 表 对 应 商品 的 库存 应 减少 同样 的 数量 
begin 

declare c int; 
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set c = (select stock from shop where pid=old.pid); 
update shop set stock = c-old.shopnum where pid = old.pid; 
End 


小 提示 : 利用 navcat for mysql 添加 触发 器 

打开 Qzmall 数据 库 后 ， 右 击 表 point， 单 击 “ 触 发 器 ”标签 ， 再 单 击 “ 添 加 触发 器 ” 
按钮 ， 输 入 触发 器 名 称 ， 选 择 触发 方式 ， 然 后 在 “定义 ”文本 框 中 输入 触发 器 内 容 即 可 ， 
如 图 3-1 所 示 。 


了 [it] stockitem @qzmall (localhost) 汪汪 汪 一 一 
文昌 总 日 名 DO | 
忆 抽 日 人 乞 另 存 为 | 辣 添 Mt 故 器 届 陡 和 把 吕 
[六 位 [过 引 [外 键 | 对 二 品 | 这 硕 [ 注 记 

名 


[23 [CT .| 
[adstoddtem After v 
ET fr 图 | 加 | 回 


定义: begn 


dedare ct; 

set c = (select stock from shop where pd=okd.pid); 
update shop set stock = coldrum where pd = old.pd; 
rc 


[mg&5 地 发 并 : 2 


3-1 添加 触发 器 
课堂 技能 训练 : 


【 实 训 操作 内 容 】 利 用 navcat for mysql 数据 库 操作 可 视 化 工具 ， 建 立 Qzmall 数据 库 。 

【 实 训 操作 要 求 】 

(1) 设置 每 个 表 的 主键 、 字 段 类 型 及 其 长 度 。 

(2) 建立 表 与 表 之 间 的 关系 (主键 、 外 键 约束 )。 

(3) 建立 触发 器 (为 stockitem 表 建 立 触发 器 ， 即 在 增加 商品 库存 记录 时 ，shop 表 中 库 
存 数量 能 够 一 并 更 新 )。 


第 三 节 电子 商城 详细 设计 
一 、 实 体 类 设计 


编写 Qzmall 商城 实体 类 时 应 注意 以 下 问题 。 

(1) 实体 类 的 名 字 尽 量 和 数据 库 表 的 名 字 对 应 相同 。 
(2) 实体 类 应 实现 java.io.Serializable 接口 。 

(3) 实体 类 一 般 有 无 参 和 在 参 的 构造 方法 。 

(4) 实体 类 有 属性 和 方法 ， 属 性 对 应 数据 库 中 表 的 字段 ， 主 要 有 getter 和 setter 方法 。 
(5) 属性 一 般 是 private 类 型 ， 方 法 一 般 是 public 类 型 ， 对 于 数据 库 自动 生成 的 ID 字 


段 对 应 的 属性 的 set 方法 应 为 private。 


Qzmall 电子 商城 系统 设计 


实体 类 放 在 com.qzmall.entity 包 下 ， 各 个 实体 类 的 代码 如 下 : 


// 大 类 表 (category) 对 应 的 实体 类 
public class Category { 
private int cid;// 大 类 编号 


private String cname;// 大 类 名 称 
private ArrayList<SubCate> subCates = new RArrayList<SubCate> (0) 


// 和 子 类 表 建 立 对 应 关系 


private ArrayList<Shop> shopArrayList=new ArrayList<Shop>(0); 


// 和 商品 表 建 立 对 应 关系 
//set、get 方法 略 } 
// 子 类 表 (subcate) 对 应 的 实体 类 
public class SubCate { 
private int sid;// 子 类 编号 
private Category category; 
private String sname; 


// 商 品 大 类 
// 小 类 名 称 


private Set shops = new HashSet (0);// 和 商品 表 建 立 对 应 关系 


//set、get 方法 略 } 
// 商 品 表 (shop) 对 应 的 实体 类 
public class Shop { 
public shop() { 
private int pid; // 商 品 I 
private Category category; 
private SubCate subCate; 
private String shopname; 
private String shopinfo; 
private Float price; 
private int stock; 
private String shopdate; 
private string imagel; 
private String image2; 
private String image3; 
private String description; 
//set、get 方法 略 } 
// 用 户 表 (user) 对 应 的 实体 类 
public class User { 
public User() { } 
private string username; 
private string password; 
private string truename; 
private string birthday; 
private string adddate; 
private int question; 
private String answer; 
private string phone; 
private string postcode; 
private string address; 
private int point; 


//set、get 方法 略 } 


// 商 品 大 类 
// 商 品 子 类 
// 商 品名 称 
// 商 品 信息 
// 价 格 

// 库 存 
// 上 架 日 期 
// 图 片 1 
// 图 片 2 
// 图 片 3 
// 详 细 信 息 


// 登 录 账 号 
// 登 录 密码 (MD5 加 密 ) 
// 真 实 姓名 

// 出 生日 期 
// 注 册 时 间 

// 请 输入 密码 问题 
// 密 码 问题 答案 
// 手 机 

// 邮 编 

// 地 址 

// 积 分 


第 三 章 
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// 订 单 主 表 (orders) 对 应 的 实体 类 


public class Orders { 


private string orderId; // 订 单 编号 
private String username; // 订 单 用 户 名 
private String truename; // 真 实 姓 名 
private string address; // 地 址 
private String phone; // 手 机 号 码 
private String postcode; // 邮 编 
private String addtime; // 订 单 时 间 
private float sum; // 金 额 
private int state; // 订 单 状 态 


//set、get 方法 略 } 
// 订 单 明 细 表 (ordersitem) 对 应 的 实体 类 


public class OrdersItem { 


private int oid; // 订 单 明 细 编 号 
private String orderId; // 订 单 编号 
private int pid; // 商 品 编号 
private String shopname; // 商 品名 称 
private float price; // 商 品 价格 
private int shopnum; /7 商品 数量 


//set、get 方法 略 } 

小 提示 : 利用 IntelliJ IDEA 在 实体 类 中 插入 set、get 方法 非常 方便 

右 击 类 的 空白 处 ， 选 择 Generate 选项 ， 然 后 出 现 Generate 面板 ， 选 择 Getter 和 Setter 
选项 ， 如 图 3-2 所 示 ， 选 择 想 要 生成 get、set 方法 的 属性 ， 单 击 OK 按钮 ， 即 可 自动 生成 
get 和 set 方法 。 


国 Sqea Fields to Generate Getters and Setters [= | 
| Seter ‘emplate: Intell Default 已 | 
|| Satter template: Intelil Default [ 
| a 


王 


pidint 
categorrCategory 


descriptionstring 


Cancel | | Help 
EE ewe) [roe 


3-2 为 实体 类 属性 添加 set 和 get 方法 


二 、 定 义 数据 库 的 连接 类 、 查 询 方法 


下 面 介绍 如 何 定 义 数 据 库 的 连接 类 、 查 询 方 法 。 代 码 如 下 : 


// 数 据 库 连 接管 理 类 ConnectionManager .java 
package com.qzmall .db; 
import java.sql.Connection; 


数据 库 连 接 类 
设计 .flv 
36 


Qzmall 电子 商城 系统 设计 


import java.sql.SsQLException; 
import com.mchange.v2.c3p0.ComboPooledDataSource; 
import com.mchange.v2.c3p0.DataSources; 
public class ConnectionManager { 
private static ConnectionManager instance; 
//C3P0 的 连接 池 对 象 
private ComboPooledDataSource ds; 
private ConnectionManager () throws Exception { 
ds = new ComboPooledDataSource ("mysql"); 


! 
// 单 例 模式 获取 数据 库 连接 对 象 
public static final ConnectionManager getInstance () { 
if (instance == null) { 
try { 
instance = new ConnectionManager (); 
} catch (Exception e) { 
e.printstackTrace (); 


} 
return instance; 


} 
// 为 了 线程 安全 ， 同 步 
public synchronized final Connection getConnection() { 
try { 
return ds.getConnection(); 
} catch (SQLException e) { 
e.printstackTrace (); 
} 
return null; 
} 
@Override 
protected void finalize() throws Throwable { 
Datasources.destroy(ds); // 关 闭 datasource 
super .finalize(); 
} 


上 
// 数 据 库 操作 类 DBUtil1.java 
package com.qzmall .db; 
import java.sql.Connection; 
import java.sql.Preparedstatement; 
import java.sql.ResultSset; 
import java.sql.SsQLException; 
public class DBUtil { 
/* 从 c3P0 数据 库 连接 池 中 获取 数据 库 连 接 对 象 */ 
public static Connection getConnection() { 
Connection conn = null; 
try { 
// 从 数据 连接 池 中 获取 数据 库 连 接 对 象 
conn = ConnectionManager .getInstance () .getConnection(); 
} catch (Exception e) { 
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e.printstackTrace (); 
} 
return conn; 


. 
// 释 放 资 源 
public static void close (Connection connection, 
PreparedStatement PsmtStatement，ResultSet resultset) { 
try { 
if (resultSet != null) { 
FesultSet.close() 7 
} 
if (PsmtStatement != null) { 
psmtstatement .close(); 
} 
if (connection != null) { 
connection.close(); 
} 
} catch (Exception e) { 
e.printstackTrace (); 
} 


} 
// 增 、 删 、 改 的 通用 方法 
public static int executeUpdate (String sql, Object... objects) 
int result = 0; 
Connection conn = null; 
PreparedStatement psmt = null; 
try { 
conn = getConnection(); 
psmt = conn.prepareStatement (sql); 
if (objects != null) { 
for (int i = 0; i < objects.length; i++) 
{psmt .setobject (i + 1，objects[i]); // 下 标 从 1 开始 的 
不 


} 
result = psmt .executeUpdate(); 
} catch (Exception e) { 
e.printstackTrace (); 
} finally { 
close (Conn， psmt, null); 
} 
return result; 


} 
// 查 询 通 用 的 方法 


public static Object executeQuery (String sql, IResultsetUtil rsHandler, 


Object... objects) { Connection connection = null; 
PreparedStatement preparedStatement = null; 
ResultSet resultSet = null; 
try { 
connection = getConnection(); 
preparedstatement = connection.prepareStatement (sql); 
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if (objects != null) { 
for (int i = 0; i < objects.length; i++) { 
preparedstatement.setObject (i + 1, objects[i]); 
} 
resultset = PreparedStatement .executeQuery (); 
return rsHandler.doHandler (resultSset); 
} catch (Exception e) { 
e.printstackTrace (); 
} finally { 
close (connection, preparedSstatement, resultSset); 
} 
return null; 


// 查 询 单 个 字段 值 通用 的 方法 
public static Object executeQuery (String sql, Object... objects) { 

return executeQuery(sql, new IResultSetUtil() { 
QOverride 

public Object doHandler (ResultSet rs) throws SQLException { 
Object object = null; 
if (rs.next()) { object = rs.getObject (1);} 

return object; 
} 
}, objects); 
} 


} 
// 处 理 Resultset 的 接口 类 : IResultSsetUtil .java 
package com.qzmall .db; 
import java.sql.ResultSset; 
import java.sql.SsQLException; 
public interface IResultSetUtil { 
public Object doHandler (ResultSet rs) throws SQLException; 


三 、 创 建 Web 应 用 过 滤器 


基于 Java 的 Web 开发 的 Servlet 有 3 类 : 过 滤器 Filter、 标 准 
Servlet 和 监听 器 Listener。 

Servlet 过 滤器 能 够 对 Servlet 容器 的 请 求 和 响应 对 象 进行 检查 
和 修改 。Servlet 过 滤器 本 身 并 不 产生 请 求 和 响应 对 象 ， 只 能 提供 过 
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滤 作 用 。Servlet 过 滤器 能 够 在 Servlet 被 调用 之 前 检查 Request 对 象 、 修 改 Request 


Header( 请 求 头 ) 和 Request 内 容 ; 同时 ， 也 可 以 在 Servlet 被 调用 之 后 检查 Response 对 象 、 


修改 Response Header 和 Response 内 容 。Servlet 过 滤器 负责 过 滤 的 Web 组 件 可 以 是 


Servlet、JSP 或 者 HTML 文件 。 
(一 )Servlet 过 滤器 的 特点 
(]) Servlet 过 滤器 可 以 检查 和 修改 ServletRequest 和 ServletResponse 对 象 。 
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(2) Servlet 过 滤器 可 以 被 指定 和 特定 的 URL 关联 ， 只 有 当 客户 请 求 访问 该 URL 时 ， 

才 会 触发 过 滤器 。 
(3) Servlet 过 滤器 可 以 被 串联 在 一 起 ， 形 成 管道 效应 ， 协 同 修改 请 求 和 响应 对 象 。 
(二 ) 使 用 过 滤器 可 以 完成 的 工作 


(1) 查询 请 求 并 做 出 相应 的 活动 。 

(2) 阻塞 “请 求 一 响应 ”对 ， 使 其 不 能 进一步 传递 。 

(3) 修改 请 求 的 头 部 和 数据 ， 用 户 可 以 提供 自 定 义 的 请 求 。 

(4) 修改 响应 的 头 部 和 数据 ， 用 户 可 以 通过 提供 定制 的 响应 版 本 实现 。 

(5) 与 外 部 资源 进行 交互 。 

所 有 的 Servlet 过 滤器 类 都 必须 实现 javax.servlet Filter 接口 。 这 个 接口 包含 3 个 过 滤器 
类 必须 实现 的 方法 。 


(三 )Servlet 过 滤器 创建 的 一 般 步 又 


(1) 实现 javax.servlet.Filter 接口 。 

(2) 实现 init 方 法 ， 读 取 过 滤器 的 初始 化 函数 。 

(3) 实现 doFilter 方法 ， 完 成 对 请 求 或 过 滤 的 响应 。 

(4) 调用 FilterChain 接口 对 象 的 doFilter 方法 ， 向 后 续 的 过 滤器 传递 请 求 或 响应 。 
(5) 销毁 过 滤器 。 


(四 ) 实 例 讲解 : 设置 请 求 和 响应 的 编码 格式 
(1) 在 com.qzmall.filter 包 下 创建 过 滤器 CharsetEncodingFilter 类 。 代 码 如 下 : 


@WebFilter (filterName = "CharsetEncodingFilter",urlPatterns = "/*") 
public class CharsetEncodingFilter implements Filter { 
@Override 
public void destroy() { } 
@Override 
public void doFilter(ServletRequest request, ServletResponse response, 
FilterChain chain) throws IOException, ServletException 


{ HttpServletResponse resp = (HttpServletResponse) response; 
HttpServletRequest req = (HttpServletRequest) request; 
// 设 置 请 求 编码 
req.setCharacterEncoding ("utf-8"); 
// 设 置 响应 编码 
resp.setCharacterEncoding ("utf-8"); 
// 清 除 页 面 缓存 


resp.setHeader ("Pragma", "No-cache") 
resp.setHeader ("Cache-Control", "no-cache"); 
resp.setDateHeader ("Expires", -10); 
chain.doFilter (request, response); } 
@Override 
public void init (FilterConfig arg0) throws ServletException {} 
} 
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(2) 在 web.xml 中 配置 过 滤器 CharsetEncoding。 
课堂 技能 训练 : 


【 实 训 操作 内 容 】 学 习 编写 和 配置 Servlet 过 滤器 来 实现 身份 验证 的 方法 。 
【 实 训 操作 步骤 】 
(1) 在 com.qzmall.filter 包 下 创建 过 滤器 ValidateFilter 类 。 代 码 如 下 : 


public class ValidateFilter implements Filter { 
private ServletContext servletContext; 
@Override 
public void destroy() { } 
@Override 
public void doFilter (ServletRequest request, ServletResponse response, 
FilterChain chain) throws IOException, ServletException { 
HttpServletRequest req = (HttpServletRequest) request; 
HttpServletResponse rep = (HttpServletResponse) response; 
HttpSession session = req.getSsession(); 
Object user=session.getAttribute ("user"); 
// 进 行 配置 (用 户 访问 的 页 面 ， 都 可 以 在 web. xml 中 进行 配置 ) 
// 获 取 配 置 的 登录 页 面 地 址 
String login page = servletContext.getInitParameter ("login page"); 


// 获 取 我 们 需要 登录 才能 访问 的 页 面 地 址 


if (session.getAttribute("user") != null) { 
chain.doFilter (request, response); 

} else { 
// 跳 转 到 登录 页 面 


System.out .println (" 你 是 需要 登录 才能 访问 的 ") ; 
rep.sendRedirect (req.getContextPath() + login page); 


} 

@Override 

public void init(FilterConfig config) throws ServletException { 
servletContext = config.getServletContext (); 


} 
(2) 在 web.xml 中 配置 过 滤器 ValidateFilter。 代 码 如 下 : 


<context-param> 
<param-name>login page</param-name> 
<param-value>/login.jsp</param-value> 
</context-param> 
les> 
<filter-name>validate Logn</filter-name> 
<filter-class>com.qzmall.filter.Validate Filter</filter-class> 
</filter> 
<filter-mapping> 
<filter-name>validate Logn</filter-name> 
<url-pattern>/cart.jsp</url-pattern> 
</filter-mapping> 
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【代码 说 明 】 

在 上 述 代码 中 ， 方 法 doFilter 设置 和 请 求 的 session 对 象 user 不 能 为 空 ， 同 时 设置 
cartjsp 页 面 需要 经 过 上 述 过 滤器 来 处 理 。 如 果 user 为 空 ， 要 转向 login.jsp 页 面 ， 要 求 用 户 

小 提示 : 在 使 用 Servlet 3.0 以 上 版 本 时 ， 配 置 过 滤器 和 servlet 都 可 以 采用 注解 的 方 
式 ， 比 如 上 述 的 CharsetEncodingFilter， 可 以 在 过 滤 方 法 前 加 上 下 面 一 段 注解 : 

@WebFilter (filterName = "CharsetEncodingFilter",urlPatterns = "/*") 

这 样 ， 就 没有 必要 再 在 web.xml 中 进行 此 过 滤器 配置 了 。 同 时 ， 配 置 servlet 时 ， 也 可 
以 采用 注解 的 方式 ， 但 必须 保证 是 Servlet 3.0 以 上 版 本 。 但 对 于 用 户 过 滤器 validateLogn， 
需要 控制 的 页 面 是 有 选择 的 ， 所 以 我 们 还 把 它 统一 配置 在 web.xml 中 。 


【知识 拓展 】 


过 滤器 在 系统 应 用 中 很 常见 。 比 如 在 银行 系统 中 ， 客 户 不 小 心 把 银行 卡 丢 了 ， 需 要 挂 
失 银 行 卡 。 只 要 挂失 银行 卡 ， 在 银行 系统 中 就 不 能 访问 这 张 银行 卡 了 ， 这 样 有 效 地 保护 了 
客户 账户 的 安全 。 这 个 时 候 就 可 以 用 过 滤器 来 做 这 个 应 用 。 


课 后 训练 


一 、 选 择 题 
1. 客户 端 发 送 请 求 后 ，Java 过 滤器 对 请 求 的 工作 流程 包括 以 下 四 项 : 
(1) 进行 请 求 预 处 理 ; 
(2) 对 响应 后 的 请 求 做 后 处 理 ; 
(3) 调用 servlet.service() 对 请 求 进行 处 理 ; 
(4) 将 响应 结果 返回 给 客户 端 。 
其 中 为 正确 执行 顺序 的 是 ( 小 
A.(D2)3)4) BDADG) CONDDA) DVI)DVY) 
2. 使 用 Servlet 过 滤器 ， 需 要 在 web.xml 中 配置 ( 。 ) 元 素 。 


A. <filter-mapping> B. <filter-config> 
C. <servlet-filter> D. <filter> 
3. servlet 过 滤器 参数 初始 化 ， 需 要 在 web.xml 的 filter 元 素 下 配置 ( ) 元 素 。 
A. <dispatcher> B. <filter-mapping> 
C. <url-partten> D. <init-param> 
4. 相关 代码 如 下 : 
<filter> 


<filter-name>UrlSecurityFilter</filter-name> 
<filter-class>com.qzmall .filter.UrlSsecurityFilter 


42 


Qzmall 电子 商城 系统 设计 


</filter-class> 
</filter> 
<filter-mapping> 
<filter-name>CoursewarePrivFilter</filter-name> 
<url-pattern>/courseware/*</url-pattern> 
<dispatcher>REQUEST</dispatcher> 
<dispatcher>INCLUDE</dispatcher> 
</filter-mapping> 
过 滤器 配置 中 ，<dispatcher> 有 request 和 include 两 种 方式 的 配置 ， 如 果 此 时 
courseware 目录 下 的 目标 页 面 可 以 forward 方式 被 调用 ， 请 问 UrlSecurityFilter 过 滤器 会 不 
会 被 调用 ? ( ) 
A. 再 增加 一 个 <dispatcher> 项 ， 配 置 为 error， 就 会 被 调用 
B. 再 增加 一 个 <dispatcher> 项 ， 配 置 为 forward， 就 会 被 调用 
C. 不 确定 
D. 不 会 


5. 通过 过 滤器 实现 编码 的 统一 ， 可 以 通过 过 滤器 类 在 doFilter 方法 下 ， 设 置 ( ) 


代码 。 
A. response.setCharacterEncoding("UTF-8") 
B. request.setCharacterEncoding("UTF-8") 
C. response.setCharacterEncoding("UTF-8") 
D. request.getCharacterEncoding("UTF-8") 
6. 以 下 是 关于 Filter 生命 周期 的 描述 ， 横 线 处 分 别 调用 了 哪个 方法 ? ( ) 
(1) Web 应 用 加 载 后 会 立即 创建 出 当前 Web 应 用 中 的 Filter 对 象 ; 
(2) 创建 后 ， 立 即 调用 方法 进行 初始 化 操作 ; 
(3) 当 关闭 Web 容器 ， 关 机 ， 或 者 reload 整个 应 用 时 ， 会 调用 方法 来 关闭 Filter。 
也 就 是 说 ， 当 Web 容器 启动 时 ，Filter 就 被 加 载 到 内 存 ， 并 在 销毁 之 前 都 常 驻 内 存 。 


A. destroy(),init() B. doFilter(), destroy() 
C. init(), doFilter() D. init(,destroy() 
7. 以 下 哪个 操作 不 是 Java 过 滤器 完成 的 ? (  ) 
A. 完成 用 户 请 求 B. 字符 编码 处 理 
C. 权限 访问 控制 D. 压缩 响应 信息 
8. 编写 Servlet 过 滤器 时 ，( ) 方 法 用 于 调用 过 滤器 链 中 的 下 一 个 过 滤器 。 
A. Servlet B. FilterConfig 
C. Filter D. FilterChain 
9. public class SecurityFilter ee . 
如 果 想 要 让 该 类 成 为 一 个 过 滤器 ， 横 线 处 应 为 (。”)。 
A. implements HttpFilter B. extends Filter 
C. implements Filter D. extends HttpFilter 
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10. 下 面 哪个 方法 当 服 务 器 关闭 时 被 调用 ， 用 来 释放 Servlet 所 占 的 资源 ? (  ) 
A. service() B.initO C. doPost() D. destroy() 
11. 在 Java 中 开发 JDBC 应 用 程序 时 使 用 ( ) 类 的 getConnection() 方 法 可 以 获取 
Connection 连接 对 象 。 


A. DBManager B. DriverManager 
C. DBHelper D. PreparedStatement 
12. 在 进行 Web 开发 时 经 常会 遇 到 中 文 乱码 的 问题 ， 可 以 在 JSP 页 面 中 解决 乱码 的 方 
式 是 ( )。 


A. <@ page contentType="text/html;charset= 中 文 " %> 

B. <%(@ page charset="GBK" %> 

C. <%(@ contentType="text/html:charset=-GBK" %> 

D. <%@ page contentType="text/html;charset=GBK" %> 
13. 在 Web 项 目的 目录 结构 中 ，web.xml 文件 位 于 ( ”) 中 ，。 

A.src 目录 B. 文档 根 目 录 

C. META-INF 目录 D. WEB-INF 目录 


二 、 实 际 操作 题 

1. 利用 navcat for mysql 数据 库 操作 可 视 化 工具 ， 建 立 Qzmall 数据 库 ， 按 照 第 二 节 的 
实例 ， 把 所 有 表 都 添加 进去 ， 并 设置 好 各 个 表 之 间 的 主键 、 外 键 约 束 ， 按 照 要 求 建立 触 
发 器 。 

2. 建立 Qzmall 数据 库 各 表 的 相应 实体 类 。 
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_ 电子 商务 网 站 建设 企业 案例 
知识 能 力 目标 
1. 掌握 jQuery 和 JSTL 的 基本 语法 。 
2. 理解 轮 播 图 的 实现 过 程 。 
3. 理解 异步 请 求 的 含义 和 用 途 。 
4. 学 会 jQuery 和 JSTL 的 基本 配置 。 
5. 学 会 用 jQuery 实现 轮 播 图 的 效果 。 
6. 学 会 使 用 JSTL 实现 迭代 和 遍历 。 
7. 学 会 异步 请 求 的 基本 应 用 。 
了 问题 提示 1 
现在 ， 一 般 大 型 购物 网 站 的 首页 都 有 轮 播 图 ， 像 天 猫 、 京 东 、 苏 宁 易 购 等 。 轮 播 图 其 
实 就 是 把 多 张 图 片 放 到 网 页 的 一 个 地 方 ， 按 一 定时 间 和 次 序 进 行 播放 。 轮 播 图 的 作用 是 不 
言 而 喻 的 ， 它 可 以 放 网 站 的 主推 产品 、 热 销 产品 、 新 品 及 其 他 推荐 产品 。 单 击 轮 播 图 可 以 
链接 到 某 一 类 商品 的 网 页 ， 让 大 家 可 以 详细 了 解 这 些 商 品 信息 ， 从 而 方便 消费 者 进行 
购买 。 
问题 : 轮 播 图 的 效果 是 如 何 制作 出 来 的 呢 ? 


第 一 节 ”jQuery 简介 


jQuery 是 一 个 JavaScript 函数 库 ， 它 是 一 个 轻 量 级 的 “ 写 的 少 、 做 的 多 ”的 JavaScript 
库 。jQuery 核心 函数 : SO0， 我 们 后 面 会 一 直 使 用 这 个 函数 。 目 前 网 络 上 有 大 量 开 源 的 JS 
框架 ， 而 jQuery 是 目前 最 流行 的 JS 框架 ， 它 提供 了 大 量 的 扩展 。 

jQuery 库 是 一 个 JavaScript 文件 ， 程 序 员 可 以 使 用 HIML 的 <script> 标签 引用 
它 : <script sre="jquery-1.10.2.min.js"></script>。 

如 果 程序 员 不 希望 下 载 并 存放 jQuery， 那 么 也 可 以 通过 CDN( 内 容 分 发 网 络 ) 引用 
它 ， 如 <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>。 


员 一 、jQuery 语法 


jQuery 语法 是 通过 选取 HTML 元 素 后 执行 一 些 操作 。 
基础 语法 : S$(selector).action()。 

(1) $ 表 示 用 美元 符号 定义 jQuery。 

(2) 选择 符 (selector) 用 于 查询 和 查找 HTML 元 素 。 

(3) jQuery 的 action0 执行 对 元 素 的 操作 。 
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实例 : 


$ (this) .hide() - 隐藏 当前 元 素 ; 

$("p") .hide () - 隐藏 所 有 <p> 元 素 ; 

$("p.test") .hide () - 隐藏 所 有 class="test" 的 <p> 元 素 ; 
$("#test") .hide () - 隐藏 所 有 id="test" 的 元 素 。 


上 局 二 、jQuery 选择 器 
jQuery 选择 器 允许 程序 员 对 HTML 元 素 组 或 单个 元 素 进行 操作 。 
jQuery 选择 器 基于 元 素 的 这、 类、 类 型 、 属 性、 属性 值 等 查找 (或 选择 )JHTML 元 素 。 


它 主要 基于 已 经 存在 的 CSS 选择 器 ， 除 此 之 外 ， 它 还 有 一 些 自 定义 的 选择 器 。 
jQuery 中 所 有 选择 器 都 以 美元 符号 开头 : $0。 
(一 ) 元 素 选择 器 
jQuery 元 素 选择 器 基于 元 素 名 选取 元 素 。 
可 在 页 面 中 选取 所 有 <p> 元 素 。 
实例 : 用 户 单 击 按钮 后 ， 所 有 <p> 元 素 都 隐藏 。 代 码 如 下 : 
$ (document) .ready (function(){ $("button").click(function(){ $("p").hide(); 
Epes 
(二 )#iid 选择 器 
jQuery 析 d 选择 器 通过 HTML 元 素 的 id 属性 选取 指定 的 元 素 。 
页 面 中 元 素 的 id 应 该 是 唯一 的 ， 所 以 要 在 页 面 中 选取 唯一 的 元 素 需 要 通过 ##d 选择 器 。 
通过 id 选取 元 素 的 语法 为 ，$("#test")。 
实例 : 当 用 户 单 击 按钮 后 ， 所 有 id="test" 属性 的 元 素 将 被 隐藏 。 代 码 如 下 : 
$ (document) .ready (function(){ $ ("button").click(function(){ $("#test"). 
hide(); 1); 1D); 


(三 )class 选择 器 


jQuery 类 选择 器 可 以 通过 指定 的 class 查找 元 素 。 
语法 为 : $(".test")。 
实例 : 用 户 单 击 按钮 后 ， 所 有 带 有 class="test" 属性 的 元 素 都 隐藏 。 代 码 如 下 : 


$ (document) .ready (function(){ $("button") .click(function (){ $(".test"). 
hide(); 1); 1); 
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出 三 、 jQuery 事件 


页 面 对 不 同 访问 者 的 响应 叫 作 事件 。 事 件 处 理 程序 指 的 是 当 HTML 中 发 生 某 些 事件 
时 所 调用 的 方法 。 比 如 : 在 元 素 上 移动 鼠标 、 选 中 单 选 按钮 、 单 击 元 素 等 。 
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在 事件 中 经 常 使 用 术语 “触发 ”( 或 “激发 ”)。 例 如 : 当 按 下 按键 时 触发 keypress 


件 。 常 用 的 jQuery 事件 方法 如 下 。 


(一 )$(document).ready() 
$(document)ready() 方 法 允许 在 文档 完全 加 载 完 后 执行 函数 。 该 事件 方法 在 介绍 jQuery 


语法 时 已 经 提 到 过 。 


他 


(=)click() 


click0 方 法 是 当 按钮 单 击 事件 被 触发 时 会 调用 一 个 函数 。 
该 函数 在 用 户 单 击 HTML 元 素 时 执行 。 
实例 ， 当 单 击 事件 在 某 个 <p> 元 素 上 触发 时 ， 隐 藏 当前 的 <p> 元 素 。 代 码 如 下 : 


$("p") .click(function(){ $(this).hide(); }); 


(三 )hover() 


hover() 方 法 用 于 模拟 光标 悬 停 事件 。 
当 鼠 标 移动 到 元 素 上 时 ， 会 触发 指定 的 第 一 个 函数 (mouseenteD; 当 鼠 标 移出 这 个 元 素 


， 会 触发 指定 的 第 二 个 函数 (mouseleave)。 


实例 : 


$("#pl") .hover( function(){ alert(" 你 进入 了 pl!"); }, function(){ alert(" 
拜拜 ! 现在 你 离开 了 pl!"); } ); 


(四 )focus() 


当 元 素 获得 焦点 时 ， 发 生 focus 事件 。 

当 通 过 鼠标 单 击 选中 元 素 或 通过 Tab 键 定 位 到 元 素 时 ， 该 元 素 就 会 获得 焦点 。 
focus() 方 法 触发 focus 事件 ， 或 规定 当 发 生 focus 事件 时 运行 的 函数 。 

实例 : 


$ ("input") .focus (function(){ $(this) .css("background- 
Solorm CCCEES 直人 志 


(五 )blur() 


当 元 素 失 去 焦点 时 ， 发 生 blur 事件 。 

blur( 方 法 触发 blur 事件 ， 或 规定 当 发 生 blur 事件 时 运行 的 函数 。 
实例 : 

$ ("input") .blur (function(){ $(this) .css("background-— 
coOlor REFEEEER dN 
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| 则 四 、jQuery 动画 
(一 ) 用 jQuery 创建 动画 
jQuery animate0 方 法 用 于 创建 自 定义 动画 。 语 法 格式 如 下 : 
$ (selector) .animate ({params}, speed, callback); 


(1) 必需 的 params 参数 定义 形成 动画 的 CSS 属性 。 
(2) 可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 ，slow、fast 或 毫秒 。 
(3) 可 选 的 callback 参数 是 动画 完成 后 所 执行 的 函数 名 称 。 


| 
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实例 : 演示 animate0 方 法 的 简单 应 用 ;， 它 把 <div> 元 素 移动 到 左边 ， 直 到 left 属性 


等 于 250 像素 为 止 。 
代码 如 下 : 


$ ("button") .click (function(){ 
$ ("div") .animate ({left:'250px'}); 
DD); 


(二 ) 用 jQuery 停止 动画 


jQuery stop() 方 法 用 于 在 动画 或 效果 完成 前 对 它们 进行 停止 。stop() 方 法 适用 于 所 有 


jQuery 效果 函数 ， 包 括 滑 动 、 淡 入 淡出 和 自 定义 动画 。 
语法 如 下 : 


$ (selector) .stop(stopAll, goToEnd); 


(1) 可 选 的 stopAll 参数 规定 是 否 应 该 清除 动画 队列 。 默 认 值 是 false， 即 仅 停止 活动 


的 动画 ， 人 允许 任何 排 入 队列 的 动画 向 后 执行 。 

(2) 可 选 的 goToEnd 参数 规定 是 否 立 即 完成 当前 动画 。 默 认 值 是 false。 
因此 ， 默 认 地 ，stop0 会 清除 在 被 选 元 素 上 指定 的 当前 动画 。 

实例 : 演示 stop0 方 法 ， 不 带 参数 。 代 码 如 下 : 

$("#stop") .click (function(){ 


$("#panel") .stop(); 
]) 


它 使 用 HIML5、CSS3、JavaScript 和 Ajax 通过 尽 可 能 少 的 代码 来 完成 对 页 面 的 布局 。 


| 同 五 、jQuery 遍历 
(一 ) 什 么 是 遍历 


jQuery 遍历 ， 意 为 “移动 ”， 用 于 根据 其 相对 于 其 他 元 素 的 关系 来 查找 (或 选 


取 )HTML 元 素 。 以 某 项 选择 开始 ， 并 沿 着 这 个 选择 移动 ， 直 到 抵达 所 期 望 的 元 素 为 止 。 


图 4-1 展示 了 一 个 家 族 树 。 通 过 jQuery 遍历 ， 能 够 从 被 选 (当前 的 ) 元 素 开 始 ， 轻 松 地 
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在 家 族 树 中 向 上 移动 (祖先 )、 向 下 移动 (子孙 )、 水 平移 动 (同胞 )。 这 种 移动 被 称 为 对 DOM 
进行 遍历 。 


<l> < 


EE 


图 4-1 jQuery 遍历 家 族 树 


图 示 解 释 : 

(1) <div> 元 素 是 <ul> 的 父 元 素 ， 同 时 是 其 中 所 有 内 容 的 祖先 。 

(2) <ul> 元 素 是 <li> 元 素 的 父 元 素 ， 同 时 是 <div> 的 子 元 素 

(3) 左边 的 <li> 元 素 是 <span> 的 父 元素 ，<ul> 的 子 元 素 ， 同 时 是 <div> 的 后 代 。 
(4) <span> 元 素 是 <li> 的 子 元 素 ， 同 时 是 <ul> 和 <div> 的 后 代 。 

(5) 两 个 <li> 元 素 是 同胞 (拥有 相同 的 父 元 素 )。 

(6) 右边 的 <li> 元 素 是 <b> 的 父 元 素 、<ul> 的 子 元 素 ， 同 时 是 <div> 的 后 代 。 
(7) <b> 元 素 是 右边 的 <li> 的 子 元 素 ， 同 时 是 <ul> 和 <div> 的 后 代 。 

提示 : 祖先 是 父 、 祖 父 、 曾 祖父 等 ; 后 代 是 子 、 孙 、 曾 孙 等 ; 同胞 拥有 相同 的 父 。 
(二 ) 向 上 遍历 DOM 树 

1.jQuery parent() 方 法 

parent() 方 法 返回 被 选 元 素 的 直接 父 元 素 。 

该 方法 只 会 向 上 一 级 对 DOM 树 进 行 遍历 。 

实例 : 返回 每 个 <span> 元 素 的 直接 父 元 素 。 代 码 如 下 : 


$ (document) .ready (function(){ 
$ ("span") .parent (); 
]) 


2.jQuery parents() 方 法 

parents() 方 法 返回 被 选 元 素 的 所 有 祖先 元 素 ， 它 一 路 向 上 直到 文档 的 根 元 素 
(<html>)。 

实例 : 返回 <span> 元 素 的 所 有 祖先 。 代 码 如 下 : 


$ (document) .ready (function(){ 
$ ("span") .parents (); 
]) 
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3. jQuery parentsUntil() 方法 
parentsUntil() 方 法 返回 介 于 两 个 给 定 元 素 之 间 的 所 有 祖先 元 素 。 
实例 : 返回 介 于 <span> 与 <div> 元 素 之 间 的 所 有 祖先 元 素 。 代 码 如 下 : 


$ (document) .ready (function(){ 
$ ("span") .parentsUntil ("div"); 
De 


(三 ) 向 下 遍历 DOM 树 

1. jQuery children() 方法 

children() 方法 返回 被 选 元 素 的 所 有 直接 子 元 素 。 

该 方法 只 会 向 下 一 级 对 DOM 树 进行 遍历 。 

实例 :返回 每 个 <div> 元 素 的 所 有 直接 子 元 素 。 代 码 如 下 : 


$ (document) .ready (function(){ 
$ ("div") .children(); 
}) 7 


画 必 


2.jQuery find() 方法 

find0 方法 返回 被 选 元 素 的 后 代 元 素 ， 一 路 向 下 直到 最 后 一 个 后 代 。 

实例 : 返回 属于 <div> 后 代 的 所 有 <span> 元 素 。 代 码 如 下 : 

$ (document) .ready (function(){ 

$ ("div") .find("span"); 

}) 7 

小 提示 : 什么 是 jQuery Mobile 

jQuery Mobile 是 一 个 为 触 控 优 化 的 框架 ， 用 于 创建 移动 Web 应 用 程序 。 

jQuery 适用 于 所 有 流行 的 智能 手机 和 平板 电脑 ，jQuery Mobile 构建 于 jQuery 库 之 
上 ， 这 使 其 更 易学 习 。 如 果 程 序 员 通 晓 jQuery Mobile 的 话 ， 由 它 结合 使 用 HIML5、 
CSS3 和 Ajax， 可 通过 尽 可 能 少 的 代码 来 完成 对 页 面 的 布局 。 


第 二 节 ” 轮 播 图 效果 实现 


| 同 一 、 轮 播 图 页 面 (CSS) 的 实现 


轮 播 图 的 界面 首先 要 放置 需要 轮 播 的 图 片 ， 图 片 左 右 两 边 要 放置 两 个 向 左 和 向 右 的 按 
钮 ， 图 片 下 面 要 放置 几 个 小 圆 点， 主要 用 来 做 图 片 导航 。 如 图 4-2 所 示 是 制作 轮 播 图 页 面 
的 静态 效果 。 
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图 4-2 轮 播 图 页 面 (CSS) 制 作 效果 


页 面 的 HTML 及 相应 的 CSS 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<style type="text/css"> 
*{padding:0; margin:0; list-style:none;} 
.banner{margin:100px auto;width:790px;height:300px;border:lpx solid 
#2D8E77; position:relative;} 
.banner .img{width:50000px;position:absolute; left:0px; top:0;} 
.banner .img li{float:left;} 
.banner .num {position:absolute; width:100%;bottom:10px; left:0; 
text-align:center; font-size:6px; } 
.banner .num li{width:1l0px;height:10px; background:#888;margin:0 
3px;display:inline-block; cursor:pointer; border-radius:50%;} 
.banner .num li.on{background:#f£60;} 
.banner .btn{position:absolute;width:30px;heigth:50px;top:50%;margin-— 
top:-25px;background:rgba(0,0,0,0.5); text-align:center; color:#fff; 
line-height:50px; font-size:40px; font-family:" 宋 体 "; 
cursor:pointer;display:none;} 
.banner:hover .btn{display:block;} 
.banner .btn l{left:0;} 
.banner .btn r{right:0;} 
</style> 
</head> 
<body> 
<div class="banner"> 
<ul class="img"> 
<li><a href="#"><img src="img/banner/bannerl.jpg"></a></1i> 
<li><a href="#"><img img/banner/banner2.jpg" ></a></1i> 
<li><a href="#"><img img/banner/banner3.jpg" ></a></1i> 
<li><a href: img/banner/banner4.jpg" ></a></1i> 
<li><a href: img/banner/banner5.jpg" ></a></1i> 
</ul> 
<ul class="num"> 
<li class="on"></1i> 
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<1i></1i> 
<1i></1i> 
< < 
<1i></1i> 
</ul> 
<div class="btn btn 1">g&lt;</div> 
<div class="btn btn r">&gt;</div> 
</div> 
</body> 
</html> 


| 司 二 、 手 动 单 击 左右 按钮 控制 轮 播 的 切换 


下 面 是 单 击 左右 按钮 控制 轮 播 的 切换 的 代码 ; 


<script type="text/javascript"> 
$ (function(){ 
var i=0 
Var size=$ (".banner .img 1i").size(); 
$(".banner .num li") .first() .addCclass ("on") 
/* 向 左 的 按钮 */ 
$(".banner .btn 1").click(function(){ 
i++ 
if (i==size){ 
i=0; 
1 
$(".banner .img") .stop() .animate ({left:-ix*790},500) 7 
$(".banner .num 
1i") .eq(i) .addCclass ("on") .siblings () .removeClass ("on"); 
}) 


/* 向 右 的 按钮 */ 
$(".banner .btn rn") .click(function(){ 
= 二 
(et 
i=size-1; 
} 


$(".banner .img") .stop() .animate({left:-i*790},500); 
$(".banner .num 
1i") .eq(i) .addclass ("on") .siblings () .removeClass ("on"); 
nl 
}) 


运行 效果 如 图 4-3 所 示 。 


图 4-3 轮 播 效果 
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如 果 不 想 做 无 颖 轮 播 ， 做 到 这 里 就 可 以 了 。 
四 三 、 无 缝 轮 播 效果 的 实现 


前 面 单 击 向 左 的 按钮 ， 当 点 到 最 后 一 张 的 时 候 ， 再 往 下 单 击 ， 马 上 就 拉 到 第 一 张 ， 视 
觉 效 果 很 不 好 ， 不 是 想 要 的 无 颖 轮 播 效果 。 那 么 如 何 才 能 实现 无 颖 轮 播 效果 呢 ? 把 第 一 张 
图 复制 一 份 ， 并 且 放 到 最 后 一 张 图 后 面 ， 这 样 就 变 成 6 张 图 了 。 示 例如 下 : 


| 1 | 2 | 3 | 4 | 5 | | | 


这 样 ， 当 单 击 向 左 按钮 到 第 五 张 的 时 候 ， 再 单 击 就 回 到 第 一 张 了 ， 这 样 就 完美 解决 了 
第 五 张 图 到 第 一 张 图 的 过 渡 ， 当 再 单 击 最 后 一 张 ( 即 第 一 张 图 片 ) 的 时 候 ， 再 把 所 有 的 图 像 
拉 到 初始 位 置 。 这 个 效果 直接 用 CSS 来 实现 ， 并 不 使 用 animate 来 实现 ， 因 为 用 CSS 来 实 
现 ， 并 没有 过 渡 效 果 ， 肉 眼看 不 出 来 。 代 码 如 下 : 


<script type="text/javascript"> 
$ (function(){ 
var i=0 
/* 将 第 一 张 图 片 进 行 复制 */ 
var clone=$ (".banner .img 1i").first().clone(); 
/* 粘 贴 到 最 后 面 */ 
$(".banner .img") .append (clone) 
var size=$ (".banner .img 1i").size(); 
$(".banner -num lin) .first() .addCclass ("on") 
/* 向 左 的 按钮 */ 
$(".banner .btn 1") .click(function(){ 
了 + 十 
if (i==size){ 
$(".banner .img") .css({left:0})/* 回 到 初始 位 置 */ 
i=1; /* 回 到 第 二 张 图 */ 


$(".banner .img") .stop() .animate({left:-i*790},500); 
$(".banner .num li") .eq(i) .addclass ("on") .siblings() . 
removeClass ("on") 7 


}) 

/* 向 右 的 按钮 */ 

$(".banner -btn r") .click(function(){ 
ames 
if (i==-1){ 

$(".banner .img") .css ({left:- (size-1)*790})/* 回 到 初始 位 置 */ 

i=size-2; 
} 
$(".banner .img") .stop() .animate({left:-i*790},500); 
$(".banner .num 1i") .eq(i).addCclass ("on") .siblings() . 
removeClass ("on™"™); 
}) 
}) 
</script> 


代码 设置 完毕 后 ， 再 把 前 面 的 CSS 部 分 banner 的 样式 下 加 上 “overflow: hidden:”， 
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把 溢出 轮 播 图 进行 隐藏 ， 然 后 浏览 网 页 ， 不 断 单 击 向 左 按钮 ， 可 以 看 到 所 有 图 片 都 是 向 左 


的 ， 不 存在 间 


断 现 象 ， 单 击 向 右 按钮 也 是 如 此 ， 这 样 就 做 到 了 无 颖 轮 播 的 效果 。 


小 提示 : 什么 是 HIMLS 

HIML5 是 最 新 的 HTML 标准 ， 是 专门 为 承载 丰富 的 Web 内 容 而 设计 的 ， 并 且 无 须 
额外 插件 ， 拥 有 新 的 语义 、 图 形 以 及 多 媒体 元 素 。 它 提供 的 新 元 素 和 新 的 API 简化 了 
Web 应 用 程序 的 搭建 。HTML5 是 跨 平台 的 ， 被 设计 为 在 不 同类 型 的 硬件 (PC、 平 板 、 手 
机 、 电 视 机 等 ) 之 上 运行 。HTML5 主要 有 以 下 几 个 新 特性 。 

(1) 新 的 语义 元 素 ， 如 <header><footer><article> 和 <section>。 

(2) 新 的 表单 控件 ， 如 数字 、 日 期 、 时 间 、 日 历 和 滑 块 。 

(3) 强大 的 图 像 支持 ( 借 由 <canvas> 和 <sveg>)。 

(4) 强大 的 多 媒体 支持 ( 借 由 <video> 和 <audio>)。 

(5) 强大 的 新 API， 比 如 用 本 地 存储 取代 cookie。 


课堂 技能 训练 : 


【 实 训 操 作 内 容 】 通 过 一 个 定时 器 来 实现 无 颖 的 自动 轮 播 和 手动 切换 。 
【 实 训 操作 要 求 】 

(1) 无 颖 自动 轮 播 。 

(2) 手动 切换 。 

(3) 圆 点 跟随 。 

提示 : 代码 如 下 。 


<script 


type="text/javascript"> 


$ (function(){ 


var i=0; 
Var clone=$ (".banner .img 1i").first().clone(); 
$(".banner .img") .append (clone); 
Var size=$ (".banner .img 1i").size(); 
// 自 动 添加 圆 点 
for (var j=0;j<size-1;j++){ 
$(".banner .num") .append ("<]1i></1i>"); 


$(".banner .num 1i") .first() -addCclass ("on"); 
// 单 击 左 键 
$(".banner .btn 1").click(function(){ 

movel (); 


}) 

// 单 击 右键 

$(".banner -btn zn) -click(function(){ 
movel () 7 


]) 
// 鼠 标 滑 入 圆 点 
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$(".banner -num 1i") .hover (function(){ 


Var index=$ (this) .index(); 
i=index; 


$(".banner .img") .stop() .animate ({left:-index*790},500); 
$ (this) .addClass ("on") .siblings () .removeClass ("on"); 


hp 
// 自 动 轮 播 


Var t=setInterval (movel,2000) 


// 对 定时 器 的 操作 


$(".banner") .hover (function(){ 


// 鼠 标 移 到 图 片上 面 时 ， 终 止 定时 器 


clearInterval (t); 
}， Eunction(){ 


t=setInterval (movel, 2000); 


}) 
// 图 片 向 左 移动 函数 
function movel()1{ 
i++2 
if (i==size){ 


$(".banner .img") .css({left:0}); 


i=1; 
} 


$(".banner .img") .stop().animate({left:-i*790},500); 


if (i==size-1){ 
$(".banner .num 


1i") .eq(0) .addclass ("on") .siblings () .removeClass ("on"); 


}elsef 
$(".banner .num 


1i") .eq(i) .addclass ("on") .siblings () .removeClass ("on");} 


} 


// 图 片 向 右 移动 函数 
function mover(){ 
==» 
if (i==-1){ 


$(".banner .img") .css({left:- (size-1)*790}); 


i=size-2; } 


$(".banner .img") .stop() .animate({left:-i*790},500); 


$(".banner .num 


1i") .eq(i) .addclass ("on") .siblings () .removeClass ("on"); 


}) 
</script> 


【代码 解释 】 


} 


(1) 首先 把 图 片 向 左 移动 和 向 右 移动 写成 两 个 函数 ， 在 图 片 向 左 移动 的 函数 中 ， 解 决 


i 留 下 的 一 个 bug， 也 就 是 做 成 无 颖 轮 播 时 ， 


因为 在 后 


j 多 加 了 图 


片 ， 第 一 个 


应 上 第 一 张 图 片 (也 就 是 最 后 一 张 图 片 )。 通 过 加 入 下 面 的 代码 把 问题 解决 了 。 


if (i==size-1) 


圆 点 没 


{$(".banner .num li") .eq(0) .addCclass ("on") .siblings () .removeClass ("on") 7 
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(2) 因为 实现 自动 轮 播 ， 而 且 自 动 轮 播 图 片 是 向 左 移动 的 ， 所 以 加 了 一 个 定时 器 函数 
var t=setInterval(movel,2000)。 
(3) 增加 了 鼠标 滑 入 圆 点 的 效果 。 
(4) 通过 上 面 的 例子 发 现 ， 图 片 下 面 中 间 的 圆 点 个 数 跟 图 片 个 数 是 一 样 的 ， 为 了 达到 
更 加 人 性 化 的 效果 ， 用 程序 自动 添加 圆 点 个 数 ， 相 应 的 界面 代码 如 下 : 
<ul class="num"> 
<li class="on"></1i> 
<1i></1i> 
<1i></1i> 
<1i></1i> 
<1i></1i> 


上 述 代 码 的 运行 结果 如 图 4-4 所 示 。 


11.11 念 
家 电 排行 榜 


秒杀 低 至 1 折 白条 12 期 免 息 
赣 抢 亿 元 优惠 券 


4-4 无 颖 轮 播 效果 


【知识 拓展 】Tab 标签 切换 

提 到 Tab 标签 切换 ， 大 家 也 许 并 不 陌生 ， 因 为 在 大 大 小 小 的 网 站 中 都 能 看 到 很 多 Tab 
切换 的 效果 ， 尤 其 在 电 商 类 、 信 息 类 这 样 的 网 站 ，Tab 切换 是 用 得 非常 多 的 。Tab 切换 有 
一 个 最 大 的 优点 就 是 节省 空间 ， 如 图 4-5 所 示 的 这 个 例子 就 是 用 标签 切换 方式 展示 商品 详 
情 的 一 个 实例 。 


商品 洋 情 县: 类 包装 5S 售后。 月 P 洗 价 


Mes 


图 4.5 。 标签 切换 
第 三 节 Ajax 异步 请 求 


同一 、Ajax 异步 请 求 的 概念 


在 同步 请 求 /响应 通信 模型 中 ， 总 是 浏览 器 (与 Web 服务 器 、 应 用 服 
务 器 或 Web 应 用 程序 相对 ) 发 起 请 求 (通过 Web 用 户 )。 接 着 ，Web 服务 器 、 应 用 服务 器 或 
Web 应 用 程序 响应 进入 的 请 求 。 在 处 理 同步 请 求 /响应 对 期 间 ， 用 户 不 能 继续 使 用 浏览 

在 异步 请 求 /响应 通信 模型 中 ， 浏 览 器 (通过 Web 用 户 ) 到 Web 服务 器 、 应 用 服务 器 或 
Web 应 用 程序 的 通信 (以 及 反 过 来 ) 是 解 耦 的 。 在 异步 请 求 /响应 对 的 处 理 中 ，Web 用 户 在 当 


可 
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前 异步 请 求 被 处 理 时 还 可 以 继续 使 用 浏览 器 。 一 旦 异步 请 求 处 理 完 成 ， 异 步 响应 就 被 通信 
(Web 服务 器 、 应 用 服务 器 或 Web 应 用 程序 ) 反 馈 回 客户 机 页 面 。 典 型 情况 下 ， 在 这 个 过 程 
中 ， 调 用 对 Web 用 户 没有 影响 ， 不 需要 等 候 响应 。 


Ajax 用 来 发 送 异步 请 求 ， 请 求 的 是 服务 器 ， 但 不 会 刷新 页 面 。 例 如 在 注册 功能 中 ， 用 


户 在 表单 中 输入 用 户 名 后 ， 在 用 户 名 输入 框 后 面 会 出 现 一 个 提示 (用 户 名 可 用 或 不 可 用 )， 
这 说 明 在 输入 之 后 向 服务 器 发 出 了 异步 请 求 ， 服 务 器 验证 这 个 名 称 是 否 注册 过 ， 然 后 返回 
结果 ， 页 面 再 通过 服务 器 返回 结果 来 显示 用 户 可 用 或 不 可 用 的 信息 ， 但 整个 请 求 过 程 页 面 
不 会 刷新 。 


jQuery 对 Ajax 提供 了 更 方便 的 代码 ， 即 用 $.ajax( f) 来 发 送 异 步 请 求 。 代 码 如 下 : 


$ (function(){ 

Var value=$ ("#xxx") .val (); 

$.ajax({ 

url : "JQueryServlet",// 要 请 求 服务 器 url 
data : {method: "ajax",val:value}, 

// 这 是 一 个 对 象 ， 它 表示 请 求 参数 : method=ajax&val=xxx 
async:true, // 是 否 为 异步 请 求 ， 默 认为 异步 
cache:false, // 是 否 缓存 结果 
type : "POST", // 请 求 提交 方式 

dataType : "json",// 返 回 json 格式 ， 表 示 服 务 器 返回 数据 是 什么 类 型 
success : function(result) { } 

// 这 个 函数 会 在 服务 器 执行 成 功 时 被 调用 。 参 数 result 就 是 服务 器 返回 的 值 

}) 
}) 


[局 二 、 异 步 请 求 在 用 户 注册 中 的 应 用 


在 用 户 注册 时 ， 要 求 用 户 名 是 不 能 重复 的 ， 需 要 输入 验证 码 ， 如 果 这 两 个 功能 完全 交 


给 后 台 来 进行 验证 ， 对 用 户 来 说 是 非常 不 友好 的 。 试 想 输 入 了 一 大 堆 数 据 ， 最 后 进行 提交 
时 ， 服 务 器 提示 用 户 不 可 用 ， 那 原来 输入 的 数据 又 得 重新 输入 一 遍 ， 严 重 影响 用 户 的 忠 
诚 度 。 


(一 )register.jsp 页 面 html 代码 
代码 如 下 : 

<html> 

<head> 


<meta charset="utf-8" /> 

<meta http-equiv="X-UA-Compatible" content="ie=edge"> 

<title> 会 员 注 册 </title> 
<script 
src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 
</head> 
<body> 

<div class="user-title"> 用 户 注 册 </div> 
<form class="form-horizontal" role="form" id="registerForm" 

action="addUserServlet.do" method="post" novalidate="novalidate" 
onsubmit="return checkForm();" > 
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<div class="user-item"> 
<label class="user-label" for="username"> 
<i class="fa fa-user"></i> 
</label> 

<input class="user-content" id="username" placeholder=" 请 输入 用 户 名 " 

name="Uusername" onblur="checkUsername ();" 
onfocus="checkHideUsername ();" /> 

<span id="spanl" > 用 户 名 </span> 

</div> 
<button type="submit" class=" btn btn-submit"> 注 册 </button> 
</form> 
<div class="link-item"> 
<a href="login.jsp” class="link"” > 已 有 账号 ， 去 登录 </a> 
</div> 
</div> 
</body> 
</html> 
【代码 说 明 】 
onblur="checkUsermmame();” 和 onfocus="checkHideUsermame():" 函 数 的 作用 是 当 用 户 失 
去 用 户 名 输入 框 焦点 时 ， 会 出 现 提示 信息 ， 当 用 户 获 得 焦点 时 提示 信息 隐藏 。 
(二 ) 使 用 jQuery 进行 异步 请 求 
registerjs 代码 如 下 : 
// 异 步 请 求 验证 用 户 名 是 否 存 在 


function checkUsername (){ 
var username =$("#username"); // 获得 用 户 名 文本 框 的 值 : 
Var patten =/^[a-zA-Z] \w{3,19}$/; 
if(!patten.test (username.val())) { 
alert ("只 能 为 英文 或 数字 ， 且 不 能 以 数字 打头 ， 长 度 为 4-20 个 字符 !") ; 
return false; 
} 
$.ajax({ 
Url : "userCheckServlet .do", 
EVPe :TPOSTSS 
data : { 
"username" : username.val(), 
"time" : new Date () .getTime () 
// 因 为 ajax 有 延迟 ， 所 以 还 要 传 一 个 时 间 参 数 
]}v 
dataType : "json"， 
success : function (result) { 
if (result == 1) { 
$("#spanl") .css('display','inline-block'); 
$ ("#span1l") .html ("用 户 名 已 存在 ! "); 
return false; 
FE 
else { 
$("#spanl") .css('display','inline-block') 
$("#spanl") .html ("用 户 名 可 以 使 用 ") 


}, 
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error : function (er) { 
console.log (er); 


En 
. 
function checkHideUsername (){ 
$("#spanl") .css('display', 'none') 
有 


(三 ) 数 据 访 问 层 设计 
1. 在 com.qzmall.dao.IUserDao 接口 类 中 建立 方法 
代码 如 下 : 


public interface IUserDao { 
// 查 询 用 户 信息 是 否 重复 
public boolean getUserByUsername (String username); 


} 


2. 在 com.qzmall.dao.UserDaolmpl 类 下 实现 其 方法 
代码 如 下 : 


public class UserDaoImpl implements IUserDao { 
@Override 
public boolean getUserByUsername (String username) { 
String strSql = "select * from user where username=?2"; 
return (boolean)DBUtil.executeQuery (strSsql, new IResultSetUtil() 

{ public Object doHandler (ResultSet rs) throws SQLException { 

if (rs.next()) { return true;} 

return false; 
} 
},username); } 


} 
(四 ) 业 务 逻 辑 层 设计 
1. 在 com.qzmall.service.lUserService 中 建立 方法 


代码 如 下 : 


public interface IUserService { 
// 查 询 用 户 信息 是 否 重 复 


public boolean getUserByUsername (String username);} 
2. 在 com.qzmall.service.UserServicelmpl 中 实现 其 方法 
代码 如 下 : 


public class UserServiceImpl implements IUserService { 
@Override 
public boolean getUserByUsername (String username) { 
IUserDao userDao=new UserDaoImpl (); 
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return userDao.getUserByUsername (username); } 


} 

(五 ) 控 制 层 设计 

在 com.qzmall.servlet.user 包 下 建立 UserCheckServlet 类 ， 代 码 如 下 : 
@WebServlet (name = "UserCheckServlet") 


public class UserCheckServlet extends HttpServlet { 
private static final long serialVersionUID = 1L; 
// 用 来 表明 类 的 不 同 版 本 间 的 兼容 性 
@Override 
protected void doPost (HttpServletRequest req, HttpServletResponse 
resp) 
throws ServletException, IOException { 
String username = req.getParameter ("username"); 
String result=""; 
IUserService userService = new UserServiceImpl (); 
if (userService.getUserByUsername (Username) ) { 
result="1"; } 
elsef{ 
result="2"; } 
resp.getWwriter() .print (result); 
PrintWriter out = resp.getWriter(); 


| 


【代码 说 明 】 
该 UserCheckServlet 首先 接受 异步 请 求 传 过 来 的 用 户 名 ， 然 后 调用 userService.getUserByUsemame 


(usemame) 方 法 验证 用 户 名 是 否 存 在 ， 如 果 存 在 ，result="1"， 否 则 result="2"， 然 后 把 result 


值 返回 客户 端 。 
运行 效果 如 图 4-6 所 示 。 
用 户 注册 
fxc123 用 户 宪 忆 存在 ! 
图 4-6 提示 用 户 名 已 经 存在 
课堂 技能 训练 : 


【 实 训 操作 内 容 】 完 成 异步 请 求 验 证 用 户 名 是 否 存在 。 
【 实 训 操作 步骤 】 

(1) 持久 层 设 计 。 

(2) 业务 逻辑 层 设计 。 

(3) 控制 层 设计 。 

(4) 视图 层 设计 (Query 代码 实现 ， 重 点 )。 
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小 提示 : 利用 IntelliJIDEA 自动 优化 导入 包 

在 写 Java 代码 的 时 候 ， 经 常 要 引用 自己 写 的 包 或 Java 自 带 的 包 ， 如 果 这 个 全 部 用 手 
工 来 写 的 话 ， 会 大 大 降低 开发 效率 ，IntelliJ IDEA 带 有 自动 导入 包 功能 。 打 开 IDEA， 选 择 
File-Settings 一 Editor 一 General 一 Auto Import 选项 ， 进 入 如 图 4-7 所 示 的 界面 。 


aiori GenenlyAtompor ee 
Appearance tr Behavior I 
Keymap 


4-7 IDEA 自动 导入 包 
选中 Optimize imports on the fly 和 Add unambiguous imports on the fly 复 选 框 。 
(1) Optimize imports on the fly: 自动 去 掉 一 些 没有 用 到 的 包 ; 
(2) Add unambiguous imports on the fly: 自动 帮 我 们 优化 导入 的 包 。 
最 后 单 击 OK 按钮 即 可 。 


【知识 拓展 】 

异步 请 求 在 网 站 中 的 应 用 非常 多 ， 比 如 用 户 注 册 时 需要 输入 验证 码 ， 那 么 验证 输入 正 
确 或 错误 的 验证 最 好 先 通过 异步 请 求 的 方式 来 进行 。 还 有 在 购物 车 里 的 商品 数量 更 新 时 ， 
小 计 金 额 、 总 计 人 金额 都 会 变动 ， 最 好 也 采用 异步 请 求 的 方式 来 实现 。 
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一 、EL 表达 式 介 绍 
Expression Language( 表 达 式 语言 ) 目 的 是 蔡 代 JSP 页 面 中 的 复杂 代码 。 
EL 表达 式 语法 如 下 : 
$ {变量 名 } 


二 、JSTL 标签 应 用 


(一 ) 为 什么 要 使 用 JSTL 标签 
简化 了 JSP 的 开发 ， 减 少 了 JSP 中 的 Scriptlet 代码 数量 。 
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EL 表达 式 虽 然 可 以 解决 “不 用 书写 Java 代码 ”的 问题 ， 但 是 对 于 复杂 的 数据 (如 数 
组 、 集 合 等 ) 取 值 会 很 麻烦 。 

使 用 JSTL 标签 配合 EL 表达 式 能 够 很 好 地 解决 复杂 类 型 数据 解析 的 问题 ， 简 化 代码 的 
书写 。 

(二 )JSTL 标签 的 具体 应 用 

1. JSTL 开发 准备 

在 JSP 页 面 中 添加 taglib 指令 : 

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"gs> 

2. JSTL 常用 标签 介绍 

(1) 通用 标签 : set、out、remove。 

中 set 标签 : 将 值 保存 到 指定 范围 里 。 

例如 : 将 value 值 存 储 到 范围 为 scope 的 变量 variable 中 : 

<c:set var="username" Value=" 张 三 " scope=" scope "/> 

@ onut 标签 : 将 结果 输出 显示 。 

例如 : 

<c:out value="value" /> 

@ ”remove 标签 : 删除 指定 域内 数据 。 

例如 : 


<c:remove var="username" scope="session"/> 


国 纱 


(2) 条 件 标 签 : if、choose。 
实例 : 


<%@ page language="java" contentType="text/html; charset=utf-8" 
pageEncoding="utf-8"%> 

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<title>jstl 中 的 if 标签 和 choose 标签 </title> 
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</head> 
<body> 
<c:set Var="age" Value="12" scope="request"></c:set> 
<!-- if 标签 : 
test :根据 判断 的 条 件 ， 如 果 条 件 为 true， 则 执行 标签 体 中 的 内 容 
3 
<%-—— <c:if test="${age==12 }"> 
您 的 年 龄 为 12 岁 
HetLt> 


hello world --%> 
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<hr> 

<!-- choose 标签 --> 

<c:choose> 
<c:when test="${age==12 }"> 
您 的 年 龄 为 12 岁 
</c:when> 
<c:otherwise> 
您 的 年 龄 不 为 12 岁 
</c:otherwise> 

</c:choose> 


</body> 
</html> 


(3) 办 代 标签 : forEach。 
forEach 标签 的 语法 定义 如 下 : 


<c:forEach var="name" items="expression" varstatus="name" 
begin="expression" end="expression" step="expression"> 
body content 


</c:forEach> 


var: 迭代 参数 的 名 称 。 在 迭代 体 中 可 以 使 用 的 变量 的 名 称 ， 用 来 表示 每 一 个 迭代 
变量 。 类 型 为 String。 

items: 要 进行 迭代 的 集合 。 对 于 它 所 支持 的 类 型 将 在 下 面 进行 讲解 。 

varStatus: 迭代 变量 的 名 称 ， 用 来 表示 友 代 的 状态 ， 可 以 访问 到 迭代 自身 的 信 
息 。 

begin: 如 果 指 定 了 items， 那 么 友 代 就 从 items[begin] 开 始 进行 迭代 ; 如 果 没 有 指 
定 items， 那 么 就 从 begin 开始 迭代 。 它 的 类 型 为 整数 。 

end: 如 果 指 定 了 items， 那 么 就 在 items[end] 结 束 运 代 ， 如果 没 有 指定 items， 那 
么 就 在 end 结束 迭代 。 它 的 类 型 也 为 整数 。 

step: 迭代 的 步 长 。 


(三 ) 利 用 forEach 标签 对 list 集合 进行 迭代 
(1) 在 com.qzmall.servletjstl 建立 JstlServlet， 代 码 如 下 : 


@Webservlet (name = "JstlServlet",urlPatterns ="/jstl.do" ) 
public class JstlServlet extends HttpServlet { 


private static final long serialVersionUID = 1L; 
// 用 来 表明 类 的 不 同 版 本 间 的 兼容 性 
protected void doGet (HttpServletRequest req, HttpServletResponse resp) 


throws ServletException, IOException { 


Map<String,Object> dataMapl=new HashMap<Sstring,Object>(); 
dataMapl .put ("shopName", "联想 笔记 本 ") ; 

dataMapl.put ("addressn, "北京 ") ; 

dataMap1.put ("price", 4999.99); 

Map<String,Object> dataMap2=new HashMap<String,Object>() 7 
dataMap2 .put ("shopName", "神舟 笔记 ") ; 

dataMap2 .put ("address", "南京 "); 

dataMap2.put ("price",3999.99); 
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Map<String,Object> dataMap3=new HashMap<String,Object>(); 
dataMap3 .put ("shopName", "苹果 笔记 本 ") ; 

dataMap3.put ("address", "上海"); 

dataMap3.put ("price",7999.99); 
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List<Map<String,Object>> mapList=new ArrayList<Map<Sstring,Object>>(); 


mapList.add (dataMapl1); 

mapList.add (dataMap2); 

mapList.add (dataMap3); 

// 将 存放 多 条 数据 的 mapList 集合 保存 到 req 域 中 

req.setAttribute ("mapList",mapList); 

// 将 mapList 集合 发 送 到 jstllist.jsp 
req.getRequestDispatcher ("jstllist.jsp") .forward (req, resp); 

| EE 


(2) 在 Web 目录 下 建立 jstllistjsp， 代 码 如 下 : 


<%@ page language="java" contentType="text/html; charset=utf-8" 
pageEncoding="utf-8"%> 

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<title> 通 过 jstl 和 EL 表达 式 迭 代 List 集合 </title> 


</head> 
<body> 
<center> 
<table border="lpx" cellspacing="0px"> 
<tr> 
<td> 商 品名 称 </td> 
<td> 产 地 </td> 
<td> 价 格 </td> 
</tr> 
<c:forEach items="$ {mapList }" var="Map"> 
<tr> 
<td>$ {Map.shopName}</td> 
<td>$ {Map.address}</td> 
<td>$ {Map.price}</td> 
</tr> 
</c:forEach> 
</table> 
</center> 
</body> 
</html> 


(3) 打开 浏览 器 ， 在 地 址 栏 中 输入 http://localhost:8080/qzmalljstl.do， 运 行 效果 如 图 


所 示 。 


© localhost:3080/qzmall/ist 器 … 个 | | Q 失守 
加 本 园 呈 8 宝 图 号 9 二 罗网 此 全 图 网 让 全 团 尼 寺中 团 京 5 商城 国 京 和 有 城 图 京 s 用 续 轿 京 5 育 城 


商品 名 称 _| 产 地 | 价格 

[Ke 和 i 太 Ht 宗 |4999.99| 
章 舟 笔记 南京 |3999.99| 
2 太 | 5 每 7999.99| 
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课 后 训练 
一 、 选 择 题 
1. 以 下 关于 EL 表达 式 ， 说 法 错误 的 是 ( 。 “)。 
A. EL 表达 式 通常 用 在 JSP 页 面 中 ， 目 的 是 使 JSP 代码 更 加 简洁 
B. EL 表达 式 的 全 称 是 Expression Language 
C.${8+5} 的 返回 值 是 13 
D. EL 表达 式 可 以 用 到 HTML 页 面 中 
2. 将 存储 在 request 域 中 的 变量 usermname 值 取 出 ， 下 列 写 法 正确 的 是 (  )。 
A. <c:set value= "$ {username}"></c:set> 
B. <c:out value= "$ {username}"></c:out> 
C. <c:set var= "username" value= "Smith" Scope= "request"> 
D. <c:out value= "username"></c:out> 
3. 已 知 JSP 页 面 的 代码 如 下 ， 此 时 页 面 的 输出 结果 是 ( 关 


<c:set var="score" Value="85"></c:set> 
<c:choose> 
<c:when test="${score>=90}"> 你 的 成 绩 为 优秀 ! </c:when> 
<c:when test="${score>=70&&score<90}"> 你 的 成 绩 为 良好 ! </c:when> 
<c:when test="${score>=60&&score<70}"> 你 的 成 绩 为 及 格 ! </c:when> 
<c:otherwise> 
对 不 起 ， 你 没有 通过 考试 
</c:otherwise> 
</c:choose> 


A. 你 的 成 绩 为 及 格 ! B. 你 的 成 绩 为 良好 ! 
C. 你 的 成 绩 为 优秀 ! D. 对 不 起 ， 你 没有 通过 考试 
4. 


<c:forEach var="name" items="collection" begin="1" 
end="n" step="step"> 
主体 内 容 


</c:forEach> 
<c:forEach> 和 迭代 标签 的 格式 ， 其 中 item 的 类 型 可 以 是 ( 类 
A. 其 余 选项 都 正确 B. Iterator C. Arrays 
D. Set E. Map 
LE 


< 要 

pageContext .setAttribute ("colors", new 

string[]{"red", "blue", "green", "pink", "dark"}); 
$$> 
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<C? Var="coOlor™”. items="S{cColOrs}”> 
\${color}=$ {color}<br/> 
</c:forEach> 


为 了 能 够 显示 所 有 颜色 数据 ， 需 要 在 颜色 处 用 到 的 标签 是 (  )。 


A. forEach B. when C. choose D. out 
6. 与 Java 中 增强 for 循环 对 应 的 JSTL 标签 是 ( 入 
A. <c:forEach>  B.<c:for> C. <c:when> D. <c:i> 


7. 
<c:set var="sum" value="0" scope="request"></c:set> 
<c:forEach begin="l" end="100" step="1" VarStatus="st"> 
<eset var="sumn" Value 一 "></c:set> 
</c:forEach> 
<c:out value="${sum}" /> 
上 述 代 码 使 用 JSTL 标准 标签 库 中 的 标签 输出 1 到 100 中 所 有 的 数字 之 和 。 应 该 填写 
的 代码 是 (  )。 
A. $[sum+stcount] B. {sumtst.count} 
C. ${sumtst.count} D. sum+st.count 
8. 在 使 用 JSTL 进行 JSP 页 面 开发 过 程 中 ， 需 要 在 JSP 页 面 中 添加 taglib 指令 ， 以 下 
选项 中 哪 一 项 是 错误 的 ? (  ) 
A. <%@ taglib url="http://java.sun.som/jsp/istl/core" prefix="c"%> 
B. <%(@ taglib url="http://java.sun.som/ijsp/core" prefix="e"%> 
C. <%(@ taglib url="http://java.sun.som/ijsp/jstl/core" prefix="e"%> 
D. <%@ prefix="d" taglib url="http://java.sun.som/ijsp/jstl/core" %> 
9. 在 JSP 页 面 上 使 用 JSTL 标签 时 ， 应 使 用 taglib 指令 导入 标签 库 描述 符 文件 ， 并 设 
置 taglib 指令 的 ( ) 属 性 指定 标签 的 前 缓 。 


A. prefix B. name C.tag D. url 
10. Ajax 中 的 属性 type 代表 的 含义 是 (。”)。 
A. 请 求 时 数据 的 传递 方式 B. 交互 成 功 后 要 执行 的 方法 
C. 接收 后 台 的 数据 类 型 D. 当前 页 面 的 类 型 
11. 在 对 象 XMLHttpRequest 的 属性 status 值 为 ( ， ) 时 表示 请 求 响应 一 切 正 常 。 
A. 500 B. 200 C.404 D. 403 


12. 在 使 用 Ajax 实现 页 面 处 理 时 ，Servlet 给 Ajax 返回 数据 的 数据 格式 为 json， 需 要 
在 (  ) 届 性 中 表现 出 来 。 


A. datatype B. data C.Jjson D.url 
13. 对 象 XMLHttpRequest 的 属性 readyStatus 值 为 ( 。”) 时 表示 请 求 已 完成 且 响 应 已 就 绪 。 
A.4 B.1 Ex D.3 
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二 、 实 际 操 作 题 
1. 编写 jQuery 代码 ， 实 现 网 页 页 面 导 航 功 能 。 
2. 编写 jQeury 代码 ， 实 现 购物 车 前 台 的 选择 商品 、 小 计 和 总 计 功 能 。 


第 四 章 jQuery 和 JSTL 标签 应 用 .pptx 第 四 章 习题 答案 .docx 


第 五 草 
商品 显示 模块 设计 
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知识 能 力 目标 
. 了 解 商品 信息 主要 包括 哪些 内 容 。 
了 解 商 品 显示 主要 包括 哪些 方面 。 
. 学 会 最 新 商品 显示 编码 设计 。 
会 分 类 分 页 商品 显示 编码 设计 。 
. 学 会 商品 详情 显示 编码 设计 。 
. 学 会 商品 模糊 查询 编码 设计 。 
| 问题 提示 
在 现实 生活 中 ， 当 违 乐购 、 家 乐 福 这 样 的 大 型 超市 时 ， 通 常会 通过 超市 的 指示 牌 清晰 
地 知道 想 买 的 商品 大 概 在 什么 位 置 。 在 节日 或 者 活动 时 都 不 需要 走 多 远 ， 在 超市 进门 处 就 
会 发 现 售卖 节日 相关 商品 的 货架 
问题 : 在 电子 商城 中 ， 如 何 让 用 户 在 繁杂 的 类 目 中 找到 想 要 的 商品 ? 
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一 、 首 页 子 模块 功能 分 析 


首页 子 模块 主要 功能 有 : 商品 广告 轮 播 图 显示 ; 商品 类 别 显 示 ; 首页 页 面 设计 .fiv 
页 面 导航 效果 。 

商品 广告 轮 播 图 显示 主要 是 把 ad 表 里 的 最 新 前 5 件 商品 图 片 显示 ， 
根据 每 个 商品 指向 的 类 别 再 链接 到 分 类 页 面 。 轮 播 图 效果 前 面 已 讲 过 。 

商品 类 别 主要 把 商品 大 类 及 子 类 表 里 的 数据 按照 层级 关系 显示 出 
来 ， 单 击 相应 类 别 链接 到 各 分 类 页 面 。 

页 面 导 航 主要 是 在 页 面 滚动 鼠标 时 能 和 右边 导航 条 焦点 相对 应 ， 
单 击 导 航 条 的 商品 大 类 能 够 自动 切换 到 该 商品 大 类 下 的 最 新 10 件 商品 ， 导 航 效 果 由 
jQuery 代码 编写 。 


二 、 基 础 知识 
(一 ) 调 用 Servlet 的 主要 方法 


(1) forward 动作 调用 : <jsp:forward page="index.do"/>。 
(2) 表单 调用 : <form action="addUserServlet.do" method="post">。 
(3) 超级 链接 调用 : <a hre 全 "index.do"> 首 页 </a>。 


(二 )Servlet 请 求 转发 、 重 定向 
(1) forward: 是 指 转发 ， 将 当前 request 和 response 对 象 保存 ， 交 给 指定 的 url 处 理 。 


和 WP 一 


i 
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并 没有 表示 页 面 的 跳 转 ， 所 以 地 址 栏 的 信息 不 会 发 生 改 变 。 代 码 如 下 : 
req.getRequestDispatcher ("/success.html") .forward (req, resp); 
(2) SendR: 是 指 重 定向 。 包 含 两 次 浏览 器 请 求 ， 浏 览 器 根据 url 请 求 一 个 新 的 页 面 ， 
所 有 的 业务 处 理 都 转 到 下 一 个 页 面 ， 地 址 栏 的 信息 会 发 生 改变 。 代 码 如 下 : 


resp.SendRedirect (req.getContextPath()+"/fail.html"); 
| 三 、 首 页 子 模块 功能 实现 


(一 ) 首 页 子 模块 持久 层 设 计 
1. 接口 类 设计 
在 com.qzmall.dao 包 下 新 建 IShopDao 接口 类 : 


public interface IShopDao { 
// 查 询 所 有 分 类 
public ArrayList<Category> getCategoryAll (); 


// 查 询 所 有 大 类 最 新 商品 
public ArrayList<Category> getCategoryShopAll (); 
// 查 询 首页 广告 
public List<Ad> adlist(); 
// 查 询 所 有 大 类 
public List<Category> getCategory(); 
;3 


2. 接口 实现 类 设计 
在 com.qzmall.dao.impl 包 下 新 建 ShopDaoImpl 类 : 


public class ShopDaoImpl implements IShopDao { 


国 纱 


/* 

(1) 该 方法 是 查询 所 有 分 类 ， 返 回 结果 为 集合 类 型 。 代 码 如 下 : 
jy 

QOverride 

public ArrayList<Category> getCategoryAll() { 


淡 往 鲨 当代 会 借 片 十 而 兰 路 【出 川 十 上 才 台 器 对 


Connection conn = DBUtil.getConnection(); 
PreparedStatement pstmt = null; 
PreparedStatement psub = null; 
Resultset rs = null; 
Resultset rsub = null; 
ArrayList<Category> categoryArrayList = new ArrayList<Category>(); 
ArrayList<sSubCate> subCateArrayList = new ArrayList<subCate>(); 
try { 
String sql = "select * from category "7 
pstmt = conn.prepareStatement (sql); 
rs = pstmt .executeQuery(); 
while (rs.next()) { 


过 
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Category category = new Category() 
category.setCid(rs.getInt ("cid")); 
category.setCname (rs.getstring ("cname")); 


String strsql = "select * from subcate Where cid=" + 


rs.getIint ("cid"); 
// 向 每 一 个 大 类 添加 它 的 子 类 
psub = conn.preparestatement (Strsql) 7 
rsub = psub.executeQuery (); 
while (rsub.next()) { 
SubCate subCate = new SubCate(); 
subCate.setSsid(rsub.getInt ("sid")); 


subCate .setSname (rsub.getstring ("sname")); 


subCate.setCategory (category); 
subCateArrayList.add (subCate); 
} 
category.setSubCates (subCateArrayList); 
categoryArrayList.add (category); 
} 
return categoryArrayList; 
} catch (SQLException e) { 
// TODO Auto-generated catch block 
e.printstackTrace (); 
return null; 
} finally { 
DBUtil.close (conn, pstmt, rs); 
DBUtil.close (conn, psub, rsub); 


中 
/* 


【代码 说 明 】 

该 方法 用 来 实现 查询 每 个 大 类 下 所 有 子 类 ， 首 先 遍 历 所 有 大 类 ， 
加 属于 它 的 子 类 ， 返 回 结果 为 ArrayList<Category> 类 型 。 

(2) 查询 所 有 大 类 下 的 最 新 商品 。 代 码 如 下 : 


dd 

@Override 

public ArrayList<Category> getCategoryShopAll() { 
Connection conn = null; 
conn = DBUtil.getConnection(); 
PreparedStatement pstmt = null; 
PreparedStatement pshop = null; 
ResultSet rs = null; 
ResultSet rshop = null; 


然后 往 每 个 大 类 下 添 


ArrayList<Category> categories = new ArrayList<Category> (0) 7 
ArrayList<Shop> shopArrayList = new ArrayList<Shop> (0) 7 


try { 
String sql = "select * from category "7 
pstmt = conn.prepareStatement (sql); 
rs = pstmt .executeQuery(); 
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while (rs.next()) { 
Category category = new Category(); 
category.setCid(rs.getInt ("cid")); 
category.setCname (rs.getstring ("cname")); 
String strsql = "select * from shop where cid=" + 
rs.getInt ("cid") + " order by shopdate desc limit 0,10 "7 
pshop = conn.preparestatement (strsql); 
rshop = pshop.executeQuery(); 
while (rshop.next()) { 
Shop shop = new Shop(); 
shop.setPid(rshop.getInt ("pid")); 
shop.setshopname (rshop.getstring ("shopname")); 
shop.setImagel (rshop.getstring ("imagel1")); 
shop.setCategory (category); 
shopArrayList.add (shop); 
} 
category.setShopArrayList (shopArrayList); 
categories.add (category); 
} 
return categories; 
} catch (SQLException e) { 
// TODO Auto-generated catch block 
e.printstackTrace (); 
return null; 
} finally { 
DBUtil.close (conn, pshop, rshop); 
DBUtil.close (conn, pstmt, rs); 


} 
7 


【代码 说 明 】 

该 方法 用 来 查询 每 个 大 类 下 的 最 新 商品 ， 首 先 遍 历 所 有 大 类 ， 然 后 往 每 个 大 类 添加 10 
件 最 新 商品 ， 返 回 结果 为 ArrayList<Category> 类 型 。 

(3) 首页 轮 播 图 。 代 码 如 下 : 


二 人 
@Override 
public List<Ad> adlist() { 
List<Ad> adlist = new ArrayList<Ad>(); 
String strSql = "select subcate.sname as sname,ad.* from ad, subcate 
where ad.sid=subcate.sid order by ad.atime desc limit 0,5"; 
return (List<Ad>) DBUtil.executeQuery (strSsql, new IResultSetUtil() { 
@Override 
public Object doHandler (ResultSet rs) throws SQLException { 
while (rs.next()) { 
Ad ad = new Ad(); 
ad.setAimage (rs.getstring ("aimage")); 
ad.setSname (rs.getstring ("sname")); 
ad.setsid(rs.getInt ("sid")); 
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ad.setAtime (rs.getstring ("atime")); 
adlist.add(ad); 
} 
return adlist; } 
]) 7 
} 
/* 


【代码 说 明 】 

由 于 进行 轮 播 的 商品 图 片 只 需要 最 新 的 5 张 ， 所 以 只 需要 查询 ad 表 中 的 按时 间 排 序 
的 前 5 条 记录 即 可 。 由 于 轮 播 图 片 是 为 某 一 子 类 商品 做 广告 的 ， 所 以 单 击 轮 播 图 片 返回 的 
结果 应 是 显示 所 有 子 类 的 商品 首页 。 因 此 上 面 的 SQL 语句 的 功能 还 有 查询 轮 播 图 片 是 属于 
哪个 商品 子 类 的 功能 。 

(4) 查询 所 有 大 类 。 代 码 如 下 : 


@Override 
public List<Category> getCategory() { 
List<Category> categoryArrayList = new ArrayList<Category>(); 
String sql = "select * from category "7 
return ( List<Category>)DBUtil.executeQuery(sql, new IResultSetUtil() { 
public Object doHandler (ResultSet rs) throws SQLException { 
while (rs.next()) { 
Category category = new Category(); 
category.setCid(rs.getInt ("cid")); 
category.setCname (rs.getstring ("cname")); 
categoryArrayList.add (category);} 
return categoryArrayList; } 
a 


小 提示 : 用 IDEA 自动 添加 接口 实现 类 方法 

用 IDEA 添加 接口 实现 类 ， 非 常 方便 ， 当 进入 添加 实现 类 界面 ， 用 鼠标 选中 类 名 称 ， 
然后 按 AlttEnter 组 合 键 ， 选 择 第 一 项 ， 如 图 5-1 所 示 ， 就 可 以 有 选择 地 或 全 部 把 接口 类 中 
的 方法 加 载 进去 。 加 载 其 他 类 方法 也 是 如 此 。 


package com qzaall. dao. impl; 


import com_qzmall_ dao. IShopDeo 


public class BV] iplcocnts 1ShopDao 


5-1 添加 接口 实现 类 方法 
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(二 ) 首 页 子 模块 业务 逻辑 层 设计 
1. 接口 类 设计 
在 com.qzmall.service 包 下 建立 接口 类 IShopService 类 。 代 码 如 下 : 


public interface IShopService { 
// 查 询 所 有 分 类 
public ArrayList<Category> getCategoryAll(); 
// 查 询 所 有 大 类 最 新 商品 
public ArrayList<Category> getCategoryShopAll (); 
// 查 询 首页 广告 
public List<Ad> adlist(); 
// 查询 所 有 大 类 
public List<Category> getCategory(); } 


2. 接口 实现 类 设计 


在 com.qzmall.service.impl 包 下 建立 接口 实现 类 ShopServiceImpl， 用 以 实现 接口 类 的 
方法 。 代 码 如 下 : 


public class ShopServiceImpl implements IShopService { 
Qoverride // 查 询 所 有 分 类 
public ArrayList<Category> getCategoryAll() { 
IShopDao shopDao=new ShopDaoImpl (); 
return shopDao.getCategoryAll(); } 
Q@override // 查 询 所 有 大 类 最 新 商品 
public ArrayList<Category> getCategoryShopAll() { 
IShopDao shopDao=new ShopDaoImpl (); 
return shopDao.getCategoryShopAll ();} 
Qoverride // 显 示 首 页 广告 
public List<Ad> adlist() { 
IShopDao shopDao=new ShopDaoImpl (); 
return shopDao.adlist ();} 
@Override // 显 示 所 有 大 类 
public List<Category> getCategory() { 
IShopDao shopDao=new ShopDaoImpl (); 
return shopDao.getCategory(); } 


} 
(三 ) 首 页 子 模块 控制 层 设计 


商品 显示 模块 控制 层 是 连接 显示 层 和 持久 层 的 桥梁 ， 可 以 分 派 用 户 的 请 求 并 选择 恰当 
的 视图 以 用 于 显示 ， 同 时 可 以 解释 用 户 的 输入 并 映射 为 模型 层 可 执行 的 操作 。 在 
com.qzmall.servlet.shop 类 下 建立 servlet:CategoryAllServlet， 上 有 具体 代码 如 下 : 


@WebServlet (name = "CategoryAllServlet",urlPatterns = "/index.do") 
public class CategoryAllServlet extends HttpServlet { 
protected void doGet (HttpServletRequest req, HttpServletResponse 
resp) throws ServletException, IOException { 
IShopService categoryShopService=new ShopServiceImpl (); 
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List<Category> categoryList= categoryShopService.getCategory(); 

req.setAttribute ("categoryList",categoryList); 

List<Ad> adList=categoryShopService.adlist (); 

req.setAttribute ("adList",adList); 

ArrayList<Category> 
categorySshopArrayList=categoryShopService.getCategoryShopAll (); 
req.setAttribute ("categoryShopArrayList",categoryShopArrayList); 

ArrayList<Category> 
categoryArrayList=categoryShopService.getCategoryAll (); 

req.setAttribute ("categoryArrayList", categoryArrayList); 

req.getRequestDispatcher ("main.jsp") .forward (req, resp); 


} 
【代码 说 明 】 

CategoryAllServlet 通过 调用 商品 业务 逻辑 对 象 categoryShopService 实现 以 下 四 个 方 f 
的 功能 。 

(1) 通过 商品 业务 对 象 categoryShopService 的 adlist 方法 生成 首页 轮 播 图 集合 adList， 
并 回 传 到 主页 (main.jsp)。 

(2) 通过 商品 业务 对 象 categoryShopService 的 getCategoryAll() 方 法 生成 商品 类 别 集合 
categoryList， 并 回 传 到 主页 (main.jsp)。 

(3) 通过 商品 业务 对 象 categoryShopService 的 getCategoryShopAll0 方 法 生成 大 类 商品 

合 categoryShopArrayList， 并 回 传 到 主页 (main.jsp)。 

(4) 通过 (3) 后 ， 再 用 于 进行 页 面 导 航 。 

(四 ) 首 页 子 模块 视图 层 设计 

1. index.jsp 页 面 设计 


代码 如 下 : 


<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<jsp:forward page="index.do"/> 


2. 头 部 (head.jsp) 页 面 设计 
代码 如 下 : 


<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<!DOCTYPE html> 
<html> 
<head> 
<link type="text/css" rel="stylesheet" href="css/font-awesome.css"> 
<link type="text/css" rel="stylesheet" href="css/reset.css"> 
<link type="text/css" rel="stylesheet" href="css/head.css"> 
</head> 
<body> 
<div class="nav"> 


<div class="w"> 
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<div class="user-info"> 
<c:choose> 
<c:when test="${empty sessionscope.user }"> 
<span ><a class="link js-login"href="]login.jsp"> 登 录 </a> </span> 
<span ><a class="link js-register" href="register.jsp"> 注 册 </a></span> 
</c:when> 
<c:otherwise> 
<span class="login"> 
<span class="link-text"> 
<span class="1ink-text"> 欢 迎 你 ， 
<span class="username">${sessionscope.user.truename}</span> 
</span> 
<span><a href="quit.do" class="]link"> 退 出 </a> </span> 
</span> 
</c:otherwise> 
</c:choose> 
</div> 
<ul class="nav-list"> 
<1i class="nav-item"> 


<a class="link" href="ordersInfo.do?currentPage=1"> 我 的 订单 </a> 全 
ds 国 

<li class="nav-item"> 高 

<a class="link" href="userInfo.do"> 个 人 中 心 </a> 职 

</1i> 专 

</ul> i 
</div></div> 局 
<div class="header"> = 
<div class="w"> 五 
<a href="index.do" class="link logo">QZMALL</a> 贯 
<div class="search-con"> 穿 
<form action="querYyShop .do?" method="get" onsubmit="return check();"> 式 
<input class="search-input" id="shopname" name="shopname" ue 
placeholder=" 请 输入 商品 名 称 "/> 


<input class="currentPage" id="currentPage" name="currentPage" 化 


value="]1" type="hidden"/> 创 
<input type="submit" class="btn search-btn" id="search-btn" value= 新 
"搜索 "></input> 规 
</form> 当 
</div> 材 
</div> 
</div> 
</body> 


<script type="text/javascript"> 
function check()1{ 
Var checkyzm = $("#shopname"); 
if (checkyzm.val() == "") { 
alert ("商品 名 称 不 能 为 空 ! ") ; 
checkyzm.focus (); 
return false; } 
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</script> 
</html> 
3. main.jsp 主 界面 设计 
代码 如 下 : 


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<$Q@ page contentType="text/html;charset=UTF-8" language="java" $%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title> 秦 职 电 商 平台 </title> 
text/css" rel="stylesheet" href="css/font-awesome.css"> 
text/css" rel="stylesheet" href="css/reset.css"> 
<link type="text/css" rel="stylesheet" href="css/index.css"> 
<script 
src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 
<script src="js/focus.js"></script> 
<script src="js/pageNav.js"></script> 
</head> 
<body> 
<jsp:include page="head.jsp"/> 
<div class bee 
<!-- 左 侧 导航 --> 
<ul class="keywords-list"> 
<c:forEach items="${categoryArrayList}" var="category"> 
<1i class="keywords-item"> 
<dl class="out"> 
<at> 
<a href="cateList.do?cid=$ {category.cid}&cname=$ {category.cname} 
&currentPage =1" target=" blank">${category.cname}</a> 
</dt> 
<dd> 
<c:forEach items="${category.subCates}" var="sname"> 
<c:if test="${category.cid==sname.category.cid}"> 
<a href="subList.do?sid=${sname.sid}&cname=$ {sname.sname} 
&currentPage=1" target=" blank">${sname.sname}</a> 
< 于 丰 > 
</c:forEach> 
</dd> 
</dl> 
< /Li> 
</c:forEach> 
</ul> 
<!-- 轮 播 图 --> 
<div class="banner"> 
<ul class="img"> 
<c:forEach items="${adList}" var="ad"> 
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<li><a href="subList.do?sid=${ad.sid}&cname=$ {ad.sname}&currentPage 
=1"><img src="<c:url value='img/banner/${ad.aimage}'/>" height="370" 
width="830"/></a></1i> 
</c:forEach> 
</ul> 
<ul class="num"> 
</ul> 
<div class="btn btn 1">&lt;</div> 
<div class="btn btn r">&gt;</div> 
</div> 
</div> 
<!-- 导 航 及 轮 播 图 结束 --> 
<!-- 右 侧 分 类 导航 开始 --> 
<div id="menu"> 
<ul> 
<c:set var="i" value="]1" /> 
<c:forEach items="${categoryList}" var="ca"> 
<li><a href="#item$ {i}">F${i} S${ca.cname}</a></1i> 
<c:set value="${i + 1}" var="i" /> 


</c:forEach> 全 
</ul> 国 
</div> 
<!-- 右 侧 分 类 导航 结束 --> 
<!-- 楼 层 开始 --> 


<div class="w"> 
<c:set var="i" Value="1" /> 
<c:forEach items="${categoryshopArrayList}" var="cate"> 
<div class="floor-wrap" id="item$ {i}"> 
<hl class="floor-title">F${i} S${cate.cname}</h1l> 
<ul class="floor-list"> 
<c:forEach items="${cate.shopArrayList}" var="shop"> 
<c:if test="${cate.cid==shop.category.cid}"> 
<1i class="floor-item"> 
<a href=" "> 
<span class="floor-text">${shop.shopname}</span> 
<a href="detail.do?pid=$ {shop.pid}"><img src="<c:url 
value="'img/pic/${shop.imagel }'/>" class="floor-img"></a> 
</a> 
< 
WERE 
</c:forEach> 
</ul> 
</div> 
<c:set value="${i + 1}" var="i" /> 
</c:forEach> 
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</div> 
<! 一 -楼 层 结束 -> 
<jsp:include page="foot.jsp"/> 
</body> 
</html> 


鸡 


电子 商务 网 站 建设 企业 案例 


【代码 说 明 】 

(1) 为 了 维护 代码 的 统一 性 ， 专 门 做 了 统一 的 页 头 (head.jsp) 和 页 脚 (footjsp) 页 面 。 

(2) 左 侧 分 类 导航 遍历 ， 利 用 JSTL 标签 对 传 来 的 categoryArrayList 集合 进行 遍历 。 
先 遍历 出 大 类 ， 然 后 查找 该 大 类 下 的 子 类 进行 遍历 。 

(3) 大 类 商品 遍历 ， 利 用 JSTL 标签 对 传 来 的 categoryShopArrayList 集合 进行 遍历 ， 
先 遍 历 出 大 类 名 称 ， 再 查询 大 类 下 的 商品 。 由 于 需要 分 楼 层 遍 历 出 每 个 大 类 最 新 10 件 商 
品 ， 在 遍历 时 不 但 要 遍历 出 每 个 大 类 下 的 商品 ， 还 需要 各 个 楼 层 标签 ， 比 如 : Fl 家 用 电 
器 ， 所 以 在 遍历 前 通过 JSTL 标签 设置 了 变量 i， 并 赋 初 值 等 于 1， 每 往 下 循环 一 个 大 类 ， 
变量 1 加 1。 

(4) 轮 播 图 遍历 。 利 用 JSTL 标签 对 传 来 的 adList 集合 进行 遍历 。 

(5) 右 侧 导航 条 遍历 。 利 用 JSTL 标签 对 传 来 的 categoryList 集合 进行 遍历 。 

(6) 轮 播 图 和 网 页 导航 的 jQuery 代码 请 参照 第 四 章 jQuery 应 用 部 分 。 

运行 效果 如 图 5-2 所 示 。 
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课堂 技能 训练 : 

【 实 训 操作 内 容 】 完 成 首页 大 类 商品 显示 功能 设计 。 
【 实 训 操作 步骤 】 

(1) 持久 层 设计 (重点 )。 

(2) 业务 逻辑 层 设计 。 

(3) 控制 层 设计 。 

(4) 视图 层 设计 。 


第 二 节 ”商品 分 类 显示 子 模块 设计 


一 、 商 品 分 类 显示 子 模块 功能 分 析 


(1) 根据 查询 条 件 查询 所 有 符合 条 件 的 商品 信息 。 
(2) 在 首页 单 击 商品 大 类 或 子 类 ， 可 以 显示 某 大 类 下 或 某 子 类 的 商 
品 列表 信息 。 2 
(3) 在 页 面 上 单 击 某 一 图 片 ， 能 够 链接 到 商品 详情 页 。 商品 分 类 显示 .fv 


二 、 分 页 查询 要 求 的 基本 数据 


(1) 当前 页 数据 : shopList 通过 调用 商品 业务 罗 辑 类 来 求 得 。 
(2) 当前 页 页 码 : currentPage， 默 认为 1， 如果 页 面 传递 了 值 ， 就 使 用 页 面 传递 的 。 
(3) 当前 页 记录 : 使 用 sql 语句 “limit ?,?”， 第 一 个 问号 代表 起 始 记录 ， 第 二 个 问号 
代表 当前 页 显示 多 少 条 记录 。 
(4) 总 页 数 ，totalPage， 使 用 总 记录 数 (totalSize) 和 每 页 记录 数 (Tally.SHOP_PAGE_SIZE) 
(5) 为 了 保证 查询 条 件 不 丢 ， 还 需要 记录 第 一 次 查询 的 条 件 : 请 求 的 servlet 路 径 及 
参数 : 


<a href="${url}&currentPage=$ (currentPage-1)> 上 一 页 </a>" 


上 面 的 url 通过 req.getRequestURL()+"?"+req.getQueryString() 参 数 求 得 。 
三 、 商 品 分 类 显示 子 模块 功能 实现 


(一 ) 商 品 分 类 显示 子 模块 持久 层 设 计 
1. 接口 类 设计 
在 com.qzmall.dao.IShopDao 类 下 添加 下 列 方法 : 


public interface IShopDao { 


// 分 页 查询 大 类 商品 
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public List<Shop> getShopCategoryPage (int cid, int currentPage， int 
pageSize); 

public int getTotalByCid (int cid) 7 

// 按 商品 名 称 分 页 模糊 查询 

public List<Shop> getShopBYShopname (String shopname, int CurrentPage int 
pageSize); 

public int getTotalByShopname (String shopname); 


2. 接口 实现 类 设计 
在 com.qzmall.dao.impl.ShopDaoImpl 类 下 实现 接口 方法 : 


public class ShopDaoImpl implements IShopDao { 


/* 

(1) 分 页 查询 大 类 商品 。 代 码 如 下 : 

检 

@Override 

public List<Shop> getShopCategoryPage (int cid, int currentPage, int 
PageSize) 

{ List<Shop> shops = new RrrayList<Shop> () 7 

String strSql = "select * from shop where cid=? order by pid desc 


limit ?,?"; // 表 示 查 询 哪 个 大 类 ， 从 哪 条 记录 开始 ， 到 哪 条 记录 结束 
return (List<Shop>) DBUtil.executeQuery(strSsql, new IResultSetUtil() { 
@Override 
public Object doHandler (ResultSet rs) throws SQLException { 
while (rs.next()) { 

Shop shop = new Shop(); 

shop.setPid(rs.getInt ("pid")); 

shop .setShopname (rs.getstring ("shopname")); 

shop.setImagel (rs.getstring ("imagel")); 

shop.setPrice(rs.getFloat ("price")); 

shops.add (shop);} 

return shops; } 

},cid, (currentPage-1)*pageSize,pagesize); 


这 


【代码 说 明 】 

该 方法 用 来 分 页 查询 表 shop 中 商品 大 类 的 所 有 商品 ， 以 商品 大 类 编号 、 请 求 页 号 和 每 
页 记录 为 参数 ， 首 先 把 每 一 条 查询 记录 封装 到 商品 实体 类 shop 中 ， 然 后 再 把 商品 实体 类 
shop 添加 到 商品 集合 shops 中 ， 返 回 结 果 为 商品 集合 分 页 边界 类 型 ， 即 从 (currentPage- 
1)*pageSize 条 记录 开始 ， 共 显示 pageSize 条 记录 。 

(2) 查询 每 条 大 类 下 的 商品 数目 ， 返 回 结果 为 整 型 。 代 码 如 下 : 

关内 

@Override 


public int getTotalByCid(int cid) { 
String strSql = "select count(*) from shop where cid=? "7 


到 
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Object obj= DBUtil.executeQuery (strsqg]l,cid); 
return Integer.parseInt (obj .tostring()); 
} 
/* 


(3) 按 商 品名 称 进行 模糊 查询 。 
该 方法 用 来 分 页 模糊 查询 表 shop 的 商品 信息 ， 以 商品 名 称 、 请 求 页 码 和 每 页 记录 数 作 
为 查询 参数 ， 返 回 结果 为 商品 集合 分 页 边界 类 型 。 代 码 如 下 : 


A 
QOverride 
public List<Shop> getShopBYShopname (String shopname, int currentPage, 
int pageSize) { 
List<Shop> shops = new ArrayList<Shop>(); 
String strSql = "select subcate.sname as sname, Shop.* from 
shop, subcate where shop.shopname like ? and subcate.sid=shop.sid order 
by shop.pid desc limit ?,2"; 
return (List<Shop>) DBUtil.executeQuery(strSql, new IResultSetUtil() 
{ @Override 
public Object doHandler (ResultSet rs) throws SQLException { 
while (rs.next()) { 
Shop shop = new Shop(); 
shop.setPid(rs.getInt ("pid")); 
SubCate subCate = new SubCate(); 
subCate.setsname (rs.getstring ("sname")); 
shop.setSubCate (subCate); 
shop .setShopname (rs.getstring ("shopname")); 
shop.setImagel (rs.getstring ("imagel")); 
shop .setPrice (rs.getEloat ("price")); 
Shop .setStock (rs .getInt ("stock")); 
shops.add (shop); } 
return shops; 
» 
},"%" + shopname + "%", (currentPage - 1) * pageSize,pageSize); 
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/* 
【代码 说 明 】 当 
由 于 是 模糊 查询 ， 所 以 在 书写 查询 参数 时 一 定 要 用 "%" + shopname + "%" 隔 开 ， 由 于 材 


模糊 查询 结果 不 止 一 条 记录 ， 所 以 要 用 分 页 显示 。 
(4) 按 商 品名 称 进行 分 页 模糊 查询 的 总 记录 数 。 代 码 如 下 : 


Ee 
@Override 
public int getTotalByShopname (String shopname) { 
String strSql = "select count(*) from shop where shopname LIKE 2"; 
Object obj= DBUtil .executeQuery (strSsql,"%" + shopname + "%$"); 
return Integer.parseInt (obj .tostring()); } 
} 


可 
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(二 ) 商 品 分 类 显示 子 模块 业务 逻辑 层 设 计 
1. 接口 类 设计 
在 com.qzmall.service.IShopService 类 下 新 增 以 下 方法 : 


public interface IShopService { 
// 分 页 查询 大 类 商品 
public List<Shop> getShopCategoryPage (int cid, int currentPage, int 
pageSize); 
public int getTotalByCid(int cid); 
// 按 商品 名 称 分 页 模糊 查询 
public List<Shop> getShopBYShopname (String shopname,int currentPage,int 
pageSize); 
public int getTotalByShopname (String shopname); 
} 


2. 接口 实现 类 设计 
在 com.qzmall.service.impl.ShopServiceImpl 类 下 实现 接口 类 的 方法 : 


public class ShopServiceImpl implements IShopService { 
Q@override // 分 页 查询 大 类 商品 
public List<Shop> getShopCategoryPage (int cid, int currentPage, int 
PageSize) { 
IShopDao shopDao=new ShopDaoImp]l (); 
return shopDao.getShopCategoryPage (cid, currentPage,pageSize); 
} 
@Override 
public int getTotalByCidl(int cid) { 
IShopDao shopDao=new ShopDaoImp]l (); 
return shopDao.getTotalByCid(cid) ; } 
eoverride // 按 商品 名 称 分 页 模糊 查询 
public List<Shop> getShopBYShopname (String shopname, int currentPage, 
int pageSize) { 
IShopDao shopDao=new ShopDaoImp]l (); 
return shopDao .getShopByShopname (shopname, currentPage,pageSize); 


} 
@Override // 按 商品 名 称 分 页 模糊 查询 的 记录 数 
public int getTotalByShopname (String shopname) { 
IShopDao shopDao=new ShopDaoImpl (); 
return shopDao.getTotalByShopname (shopname); } 
} 


(三 ) 分 页 工具 类 设计 

分 页 工具 类 放 在 com.qzmallutil 包 下 。 
1. 设计 全 局 变量 SHOP_PAGE_SIZE 
代码 如 下 : 


package com.qzmall.util; 
public class Tally { 
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public static final int SHOP PAGE SIZE = 5;// 每 页 显示 商品 个 数 
} 


2. 建立 分 页 类 Pager 
代码 如 下 : 


package com.qzmall.util; 

public class Pager { 

private int currentPage;// 当 前 页 

private int totalSize;// 总 记录 数 

private int totalPage;// 总 页 数 

private boolean hasFirst; // 首 页 

private boolean hasPrevious;// 上 一 页 

private boolean hasNext;// 下 一 页 

private boolean hasLast;// 尾 页 

public Pager (int currentPage,int totalSize){ 
this.currentPage=currentPage; 
this.totalSize=totalSize7 

} 

public int getCurrentPage() { 
return currentPage; 


本 内 


} 

public void setCurrentPage (Int currentPage) { 
this .currentPage = currentPage; 

} 

public void setTotalSize(int totalSize) { 
this.totalSize = totalSize7 

public int getTotalPage() { 
totalPage=totalSize/Tally.SHOP PAGE SIZE; 
if (totalsize%Tally.SHOP PAGE SIZE!=0) 
totalPage++; 
return totalPage; 

} 

public void setTotalPage (int totalPage) { 
this.totalPage = totalPage; 

} 

public boolean isHasFirst() { 
if (currentPage==1 ) {// 如 果 当 前 页 为 1， 首 页 链接 不 能 用 


return false; 
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} 
return true; 
} 
public void setHasFirst (boolean hasFirst) { 
this.hasFirst = hasFirst; 
} 
public boolean isHasPrevious() { 
if (isHasFirst()) 
// 如 果 首页 链接 能 用 ， 则 可 以 有 上 一 页 链接 


return true; 


85 


电子 商务 网 站 建设 企业 案例 


else 
return false; 
} 
public void setHasPrevious (boolean hasPrevious) { 
this.hasPrevious = hasPrevious; 
} 
public boolean isHasNext() { 
if (isHasLast ()) 
// 如 果 尾 页 链接 能 用 ， 则 可 以 有 下 一 页 链接 
return true; 
else 
return false; 
} 
public void setHasNext (boolean hasNext) { 
this.hasNext = hasNext; 
} 
public boolean isHasLast() { 
if(currentPage == getTotalPage()) 
// 如 果 当 前 页 为 总 页 数 ， 尾 页 链接 不 能 用 
return false; 
ESe 
return true; 
, 
public void setHasLast (boolean hasLast) { 
this.hasLast = hasLast; 


. 


【代码 说 明 】 

进行 分 页 需要 考虑 的 几 个 因素 有 : 当前 页 (currentPage)、 总 记录 数 (totalSize)、 总 页 数 (totalPage) 
和 每 页 显示 多 少 商品 记录 (SHOP PAGE SIZE)。totalSize、totalPage、SHOP PAGE SIZE 之 间 的 
关系 如 下 : 

totalPage=totalSize/Tally.SHOP PAGE SIZE; 


if(totalSsizes%Tally.SHOP PAGE SIZE!=0) 
totalPage++; 


(四 ) 商 品 分 类 显示 子 模块 控制 层 设计 
1. 大 类 商品 分 页 显示 
在 com.qzmall.servlet.shop 类 下 建立 servlet:CateShopServlet。 有 具体 代码 如 下 : 


@WebServlet (name = "CateShopServlet",urlPatterns = "/cateList.do") 
public class CateShopServlet extends HttpServlet { 
protected void doGet (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
try { 
int currentPage = Integer.parseInt (req.getParameter ("currentPage")); 
int cid = Integer.parseInt (req.getParameter ("cid")); 
String cname = req.getParameter ("cname"); 
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IShopService categoryService = new ShopServiceImpl (); 
int totalSize = categoryService.getTotalBYCid (cid) 
int totalPage = totalSize / Tally.SHOP PAGE SIZE; 
if (totalSize 当 Tally.SHOP PAGE SIZE != 0) 
totalPaget++; 
if (currentPage < 1) {currentPage = 1;} 
if (currentPage > totalPage) {currentPage = totalPage;} 
Pager page = new Pager (currentPage, totalsize); 
List<Shop> shopList = categoryService.getshopCategoryPage (cid, 
currentPage, Tally.SHOP PAGE SIZE); 
req.setAttribute ("shopList", shopList); 
req.setAttribute ("page", page); 
String Url = req.getRequestURI() + "?" + req.getQueryString() 7 
System.out.println ("url=" + url); 
int index = url.lastIndexOf ("gcurrentPage="); 
if (index != -1) {url = url.substring(0, index);} 
System.out .println("urllast=" + url); 
req.setAttribute ("url", url); 
req.setAttribute ("cname", cname); 
req.getRequestDispatcher ("list.jsp") .forward (req, resp); 
} catch (NumberFormatException ex) { 
String msg = "页 码 传输 异常 "; 
req.setAttribute ("msg", msg); 
req.getRequestDispatcher ("result.jsp") .forward (req, resp); . 
i 
i 


【代码 说 明 】 
当 用 户 在 mainjsp 页 面 ， 单 击 商品 某 一 大 类 时 ， 就 会 交 给 CateShopServlet 类 进行 


处 理 。 


(1) 利用 CateShopServlet 得 到 页 面 传 来 数据 。 

Q@ 首先 通过 req 得 到 当前 页 数据 currentPage 和 大 类 编号 cid。 

@ 通过 调用 商品 业务 逻辑 对 象 的 getTotalByCid(cid) 得 到 totalSize。 

@ 通过 调用 商品 业务 逻辑 对 象 的 getShopCategoryPage 方法 得 到 shopList。 

@ 通过 req.getRequestURI( + "?" + req.getQueryStringO) 得 到 url 地 址 。 

例如 : 

url="/qzmall/subList.do?sid=2&gcname=%E6%B4%97%E8%Al1%SA3%E6%9C%BA& 
currentPage= 1" 

它 表示 当前 执行 的 查询 是 “cid=2，currentPage=1” 的 查询 。 

如 果 继 续 查 询 下 一 页 或 上 一 页 ，cid=2 的 数据 不 能 丢 ，currentPage 这 个 值 是 需要 变化 


的 ， 为 了 达到 这 个 目的 ， 可 以 把 url 中 的 currentPage 的 部 分 去 掉 ， 查 询 时 再 把 它 加 上 ， 就 
可 以 达到 查询 目的 了 。 


(2) 把 得 到 的 有 关 数 据 传 回 页 面 (list.jsp)。 
@ ”得 到 分 页 数据 : req.setAttribute("shopList", shopList)。 


可 


鲨 水 全 会 俐 片 十 大 音 郧 『 出 上 川 十 上 才 驯 澡 驯 辐 内 


斗 水 入 


.电子 商务 网 站 建设 企业 案例 


@ 得 到 分 类 导航 : req.setAttribute("page", page)。 

@ 得 到 截取 后 的 url 字符 串 : req.setAttribute("url", url)。 
@ 得 到 分 类 名 称 : req.setAttribute("cname", cname)。 

(3) 异常 处 理 。 

如 果 输 入 的 当前 页 不 是 数字 ， 则 提示 输入 错误 。 


2. 商品 模糊 查询 功能 实现 
在 com.qzmall.servlet.shop 类 下 建立 servletQueryShopServlet。 具 体 代 码 如 下 : 


Q@WebServlet (name = "QueryShopServlet",urlPatterns = "/queryShop .do") 
public class QueryShopServlet extends HttpServlet { 
protected void doGet (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException {doPost(req, resp); } 
protected void doPost (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
String shopname = req.getParameter ("shopname"); 
try { 
int currentPage = Integer.parseInt (req.getParameter ("currentPage")); 
IShopService shopService = new ShopServiceImpl (); 
int totalSize = shopService.getTotalByShopname (shopname); 
int totalPage=totalsize/Tally.SHOP PAGE SIZE; 
if (totalSsize%Tally.SHOP PAGE SIZE!=0) 
totalPage++7 
if (currentPage < 1) { currentPage = 1;} 
if (currentPage > totalPage){ currentPage = totalPage;} 
Pager page = new Pager (currentPage, totalSize); 
List<Shop> shopList = shopService.getShopBYShopname (shopname, 
currentPage, Tally.SHOP PAGE SIZE); 
req.setAttribute ("shopList", shopList); 
req.setAttribute ("page", page); 
String url = req.getRequestURI() + "?" + req.getQuerystring(); 
System.out .println("url=" + url); 
int index = url.lastIndexOf ("gcurrentPage="); 
if (index != -1) {url = url.substring(0, index);} 
System.out .printlin ("urllast=" + url); 
req.setAttribute ("url", url); 
req.setAttribute ("cname", shopname); 
req.getRequestDispatcher ("list.jsp") .forward (req, resp); 
} catch (NumberFormatException ex) { 
String msg=" 页 码 传输 异常 "; 
req.setAttribute ("msg",msg); 
req.getRequestDispatcher ("result .jsp") .forward (req, resp); 


} 
(五 ) 商 品 分 类 显示 子 模块 视图 层 一 一 商品 分 类 页 面 (list.jsp) 设 计 
代码 如 下 : 
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<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title> 商 品 列表 </title> 
<link type="text/css" rel="stylesheet" href="css/font-awesome.css"> 
<link type="text/css" rel="stylesheet" href="css/reset.css"> 
<link type="text/css" rel="stylesheet" href="css/list.css"> 
<script 
src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 
</head> 
<body> 
<jsp:include page="head.jsp"/> 
<div class="crumb"> 
<div class="w"> 
<div class="crumb-con"> 
<a href="index.do" class="]link">QZMAIL</a> 


<span>></span> 
<span class="link-text">$ {cname} 
</span> 
</div> 
</div> 


</div> 
<div class="page-wrap w"> 
<!--1ist 容器 --> 
<ul class="p-list-con"> 
<c:forEach items="${shopList}" var="shop"> 
<li class="p-item"> 
<div class="p-img-con"> 
<a href="detail.do?pid=${shop.pid}" class="link"><img src="<c:url 
value="'img/pic/${shop.imagel }'/>" class="p-img"></a> 
</div> 
<div class="p-price-con"> 
<span class="p-price">¥<strong>${shop.price}</strong></span> 
</div> 
<div class="p-name-con"> 
<a href="" class="p-name">${shop.shopname}</a> 
</div> 
<div class="p-buy"><a 
href="cartServlet .do?pid=${shop.pid}&action=addgquantity=1" 
target=" blank"> 立 即 抢购 </a></div> 


i 
</c:forEach> 
</ul> 
<! 一 -分 页 容器 -一 > 


<div class="pg-content"> 
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<form class="page-form" method="post" onsubmit="return 
checkForm();" action="${url}"> 
<input type="text" name="currentPage" id="currentPage" class="page" > 
<input type="submit" value="go" > 
</form> 
<c:if test="${page.hasFirst}"> 
<li><a href="${url}&currentPage=1"> 首 页 </a></1i> 
<yesit> 
<c:if test="$ {page.hasPrevious}"> 
<li><a href="${url}&currentPage= 
${page.currentPage-1}"> 上 一 页 </a></1i> 
HEEL 
<c:if test="$ {page.hasNext}"> 
<li><a href="$ {url}&currentPage= 
${page.currentPage+1}"> 下 一 页 </a></1i> 
E> 
<c:if test="${page.hasLast}"> 
<li><a 
href="$ {url}&currentPage= 
${page.totalPage}"> 尾 页 </a></1i> 
</c:if> 
<span class="pg-total"> 
当前 第 ${page.currentPage} 页 , 总共 ${page.totalPage} 页 </span> 
</div> 
</div> 
<script type="text/javascript"> 
function checkForm(){ 
var t=$ ("#currentPage") .val () ;// 这 个 就 是 我 们 要 判断 的 值 了 
if(isNaN (七 ) ) { 
alert ("页 码 不 是 数字 ") ; 
return false; 
L 
} 
</script> 
<jsp:include page="foot.jsp"/> 
</body> 
</html> 


【代码 说 明 】 

(1) 本 页 面 接收 来 自 mainjsp 发 出 的 大 类 查询 、 子 类 查询 及 模糊 查询 命令 生成 的 数据 。 

(2) 利用 JSTL 标签 对 传 来 的 shoplist 商品 集合 进行 遍历 ， 得 到 所 要 查询 的 商品 信息 ， 
利用 JSTL 标签 对 传 来 的 page 类 进行 条 件 查询 操作 ，<c:if test="$ {page.hasFirst}"> 表 示 如 果 
有 首页 函数 为 真 ， 显 示 首 页 标签 。“<a hre 人 "$fur}j&currentPage=1"> 首 页 </a></i>” 中 的 
url 表示 第 一 次 查询 生成 地 址 栏 地 址 的 字符 串 去 掉 currentPage 后 面 的 字符 。 这 样 可 以 在 页 
码 变动 的 情况 下 ， 保 证 查询 条 件 不 会 丢 。 其 他 以 此 类 推 。 

(3) 分 页 容器 中 还 包括 一 个 表单 ， 表 单 中 的 文本 框 是 让 用 户 输入 页 码 进行 查询 。 用 户 
输入 的 页 码 必须 是 数字 且 不 能 超出 页 码 范围 ， 否 则 提示 出 错 。 

商品 分 类 查询 和 模糊 查询 的 运行 效果 分 别 如 图 5-3 和 图 5-4 所 示 。 
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小 提示 : Port 8080 is already is use 异常 处 理 

在 开发 工程 中 常常 会 遇 到 java.net.BindException: Address already is use:bind 或 者 Port 
8080 is already is use 等 异常 ， 然 后 Web Server 不 能 启动 等 问题 ， 这 是 因为 已 经 有 其 他 程序 
或 者 进程 占用 了 相应 的 端口 ， 解 决 这 个 问题 就 要 找 出 到 底 是 哪个 程序 占用 了 这 个 端口 ， 然 
后 关 掉 那 个 程序 或 者 取消 那个 进程 就 可 以 了 。 

解决 的 步骤 如 下 : 

(1) 打开 一 个 命令 窗口 ， 执 行 netstat-a -o 命令 。 

(2) 找到 占用 那个 端口 的 程序 ， 找 到 它 的 pid。 

(3) 执行 命令 tasklist， 通 过 pid， 找 到 和 pid 对 应 的 应 用 程序 进程 。 

(4) 打开 任务 管理 器 ， 终 止 这 个 进程 。 

(5) 重新 启动 或 者 运行 服务 程序 ， 就 会 发 现 这 个 异常 没有 了 。 


课堂 技能 训练 


【 实 训 操作 内 容 】 商 品 模糊 查询 功能 实现 。 
【 实 训 操作 步骤 】 

(1) 持久 层 设 计 (重点 )。 

(2) 业务 逻辑 层 设计 。 

(3) 控制 层 设计 。 

(4) 视图 层 设计 。 
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第 三 节 ”商品 详情 子 模块 设计 
一 、 商 品 详情 显示 功能 分 析 


商品 详情 显示 包括 商品 图 片 轮 播 显 示 、 基 本 信息 显示 、 详 情 信 息 显 

图 片 轮 播 显示 就 是 把 商品 表 里 的 商品 图 片 信息 转换 为 图 片 显 示 即 
可 ， 图 片 轮 播 功能 由 jQuery 实现 。 

基本 信息 主要 包括 商品 名 称 、 价 格 、 库 存 等 信息 。 

详细 信息 主要 包括 售后 服务 、 商 品 配置 、 用 户 评价 等 信息 ， 主 要 由 切换 标签 来 显示 。 


二 、 商 品 详情 显示 功能 实现 
(一 ) 商 品 详情 子 模块 持久 层 设计 


1. 持久 层 接口 类 设计 
在 com.qzmall.dao.IShopDao 接口 类 下 新 增 方法 : 


public interface IShopDao { 

// 查 询 单个 商品 详细 信息 

public Shop getShopByid(int pid); 
} 


2. 在 com.qzmall.dao.impl.ShopDaolmpl 类 下 实现 上 述 方法 


代码 如 下 : 
public class ShopDaoImpl implements IShopDao { 
/* 
按 商 品 id 查询 商品 详细 信息 
该 方法 用 来 分 页 查询 表 sho 中 每 一 条 详细 信息 ， 以 商品 id 作为 查询 参数 ， 返 回 结果 为 商品 实体 类 
shop 
ba 
QOverride 
public Shop getShopByid(int pid) { 
String strSql = "select subcate.sid as ssid, shop.* from shop,subcate 


where shop.sid=subcate.sid and pid=?"7 
return (Shop) DBUtil.executeQuery(strSsql, new IResultSetUtil() { 
@Override 
public Object doHandler (ResultSet rs) throws SQLException { 
ee 
Shop shop = new Shop(); 
shop.setPid(rs.getInt ("pid")); 
SubCate subCate = new SubCate(); 
subCate.setsSid(rs.getInt ("ssid")); 
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setsubCate (subCate); 

setshopname (rs.getstring ("shopname")); 
setshopinfo(rs.getstring ("shopinfo")); 
setshopdate (rs.getstring ("shopdate")); 
setstock (Ts -getInt ("stock")); 

setPrice (rs.getFloat ("price")); 
setImagel (rs.getstring ("imagel1")); 
setImage2 (rs.getstring ("image2")); 
setImage3 (rs.getstring ("image3")); 


.SetDescription(rs.getstring ("description")); 


return shop; 
} else { 
return null; 


} 
},pid); } 
} 


(二 ) 商 品 详情 子 模块 业务 逻辑 层 设计 


1. 接口 类 设计 


在 com.qzmall.service.IShopService 类 下 新 增 以 下 方法 : 
public interface IShopService { 

// 查 询 单 个 商品 详细 信息 

public Shop getShopByid(int pid); 


; 


2. 接口 实现 类 设计 


在 com.qzmall.service.impl.ShopServiceImpl 类 下 实现 接口 类 的 方法 : 


public class ShopServiceImpl implements IShopService { 
Qoverride // 查 询 单个 商品 详细 信息 
public Shop getshopByidl(int pid) { 
IShopDao shopDao=new ShopDaoImpl (); 
return shopDao.getshopByid (pid); 


} 
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(三 ) 商 品 详情 子 模块 控制 层 设 计 一 一 商品 详情 页 功能 实现 


当 用 户 在 mainjsp 页 面 单 击 商品 图 片 时 ， 就 会 交 给 QueryShopServlet 类 进行 处 理 ， 调 
用 商品 业务 逻辑 类 方法 getShopByid 生成 商品 详细 信息 对 象 shop， 并 回 传 到 商品 详细 页 


(detailjsp)。 代 码 如 下 : 


@WebServlet (name = 


"DetailServlet",urlPatterns = "/queryShop.do") 


public class DetailServlet extends HttpServlet { 


protected void 


doGet (HttpServletRequest reqg, HttpServletResponse resp) 


throws ServletException, IOException { 
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int pid=Integer-parseInt (req.getParameter ("pid")); 
IShopService shopService=new ShopServiceImpl (); 
Shop shop=shopService.getShopByid (pid); 
req.setAttribute ("shop", shop); 
req.getRequestDispatcher ("detail .jsp") .forward (req, resp); 
} 
} 


(四 ) 商 品 详情 子 模块 视图 层 
代码 如 下 : 


<%@ taglib prefix="c" url="http://java.sun.com/jsp/jstl/core" $%> 
<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title> 商 品 详情 </title> 
<link type="text/css" rel="stylesheet" href="css/font-awesome.css"> 
<link type="text/css" rel="stylesheet" href="css/reset.css"> 
<link type="text/css" rel="stylesheet" href="css/basic.css"> 
<link type="text/css" rel="stylesheet" href="css/detail.css"> 
<script 
src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 
<script type="text/javascript" src="js/detail.js"></script> 
</head> 
<body> 
<jsp:include page="head.jsp"/> 
<div class="crumb"> 
<div class="w"> 
<div class="crumb-con"> 
<a href="index.do" class="link">MMail</a> 
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<span>></span> 
<span class="link-text"> 商 品 详情 </span> 
</div> 
</div> 


</div> 
<div class="w"> 
<div class="info-img"> 
<div class="main-img"> 
<ul class="main-img-info"> 
<1i><img src="<c:url value='img/pic/${shop.imagel}'/>" width="400" 
height="400" /></1i> 
<1i> <img src="<c:url value='img/pic/${shop.image2}'/>" width="400" 
height="400" /></1i> 
<li ><img src="<c:url value="'img/pic/${shop.image3}'/>" width="400" 
height="400" /> </1i> 
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</ul> 
<div class="btn btn 1">glt;</div> 
<div class="btn btn r">ggt;</div> 
</div> 
<div> 
<ul class="min-img"> 
<li ><img src="<c:url value='img/pic/${shop.imagel}'/>" 
width="75" height="75" /></1i> 
<1Li ><img src="<c:url value='img/pic/${shop.image2}'/>" 
width="75" height="75" alt=""/></1i> 
<li><img src="<c:url value="'img/pic/${shop.image3}'/>" 
width="75" height="75" alt /></1i> 
</ul> 
</div> 
</div> 
<div class="p-info-con"> 
<hl class="p-name">${shop.shopname}</h1l> 
<p class="p-subtitle">${shop.shopinfo}</p> 
<div class="p-info-item p-price-con"> 
<span class="label"> 价 &gnbsp; gnbsp; &nbsp; &nbsp; 格 : </span> 
<span class="info">¥${shop.price}</span> 
</div> 
<div class="p-info-item"> 
<span class="]label"> 库 snbsp; gnbsp; &nbsp; &nbsp; 存 :</span> 
<span class="info">${shop.stock}</span> 
</div> 
<div class="p-info-item"> 
<span class="label"> 上 架 时 间 :</span> 
<span class="info adddate">${shop.shopdate}</span> 
</div> 
<div class="p-buy"><a href="cartServlet.do?pid=$ {shop.pid} 
&action=addgquantity=1"” target=" blank"> 立 即 抢购 </a></div> 
</div> 
</div> 
</div> 
<div class="w"> 
<div class="detail-wrap"> 
<ul class="tab-list"> 
<li class="active"> 商 品 详情 </1i> 
<1i > 规格 参数 </1i> 
<1i > 包装 与 售后 </1i> 
<1i > 用 户 评 价 </1i> 
</ul> 
<div class="content detail-con"> 
${shop.description} 
</div> 
<div class="detail-con"> 
规格 参数 
</div> 
<div class="detail-con"> 
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包装 与 售后 
</div> 
<div class="detail-con"> 
用 户 评价 
</div> 
</div> 
</div> 
<jsp:include page="foot.jsp"/> 
</body> 
</html> 


【代码 说 明 】 

(1) 本 页 面 主要 用 来 显示 商品 的 详细 信息 ， 接 收 来 自 DetailServlet 传 来 的 shop 实体 类 
对 象 ， 由 于 只 显示 一 条 商品 信息 ， 所 以 直接 用 EL 标签 来 进行 解析 就 可 以 了 。 

(2) 本 页 面 左边 部 分 显示 的 商品 轮 播 图 ， 用 EL 标签 显示 的 3 张 商品 图 片 来 完成 。 

(3) 右上 部 分 显示 商品 基本 信息 ， 如 商品 名 称 、 价 格 、 库 存 等 。 

(4) 右 下 部 分 的 标签 切换 ， 主要 用 来 显示 商品 详细 信息 息 ， 如 规格 参数 、 包 装 售后 
户 评价 ， 这 样 更 能 节省 空间 。 

(5) 轮 播 图 和 标签 切换 jQuery 代码 请 参照 第 四 章 jQuery 应 用 部 分 。 

商品 详情 页 运行 效果 如 图 5-5 所 示 。 
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小 提示 : request.getAttribute() 和 request.getParameter() 的 区 别 

(1) getAttribute() 有 对 应 的 setAttribute0 方 法 ， 而 getParameter0 没 有 对 应 的 setParameter() 

(2) getParameter() 获 取 到 的 值 只 能 是 字符 囊 ， 不 可 以 是 对 象 ， 而 getAttribute() 获 取 到 
的 值 是 Object 类 型 的 。 

(3) 通过 fom 表单 或 者 url 来 向 另 一 个 页 面 或 者 servlet 传递 参数 的 时 候 需 要 用 
getParameter 获取 值 ; getAttribute 只 能 获取 setAttribute 的 值 。 
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(4) setAttribute() 是 应 用 服务 器 把 这 个 对 象 放 到 该 页 面 所 对 应 的 一 块 内 存 当 中 ， 当 页 面 
服务 器 重 定向 到 另 一 个 页 面 的 时 候 ， 应 用 服务 器 会 把 这 块 内 存 复制 到 另 一 个 页 面 对 应 的 内 
存 当 中 。 通 过 getAttribute() 可 以 取得 存储 下 的 值 ， 当 然 这 种 方法 可 以 用 来 传 对 象 。 


用 session 也 是 一 样 的 道理 ， 只 是 request 和 session 的 生命 周期 不 一 样 而 已 。 


课堂 技能 训练 : 


【 实 训 操作 内 容 】 商 品 详情 显示 功能 实现 。 
【 实 训 操 作 步 又 】 

(1) 持久 层 设 计 。 

(2) 业务 逻辑 层 设计 。 

(3) 控制 层 设计 。 

(4) 视图 层 设计 。 


课 后 训练 


全 

国 

一 、 选 择 题 职 
一 

局 

1. 在 JSP 小 脚本 中 ， 使 用 下 面 ( ) 语 名 可 以 正确 重 定向 至 另外 一 个 页 面 。 专 
A. req.getRequestDispatcher("index.jsp").forward(req,resp) 

B. resp.sendRedirect("ndex.jsp") 二 

C. req.sendRedirect("index.jsp") 去 

D. resp.sendRedirect() 

es 

2 + 
public void doFilter(ServletRequest req, ServletResponse resp, 训 
FilterCchain chain) throws ServletException, IOException { 化 
chain.doFilter (req, resp); 创 
Roquest hispateher dis; » 
a | 

dis .forward (req, resp);} 区 
材 


那么 能 够 正确 填写 在 横 线 处 的 选项 是 (  )。 
A. dis=new RequestDispatcher("error.JsSp"): 
B. dis=request.getRequestDispatcher("error.jsp"): 
C. dis=response.getRequestDispatcher("error.jsp"): 
D. dis=request.RequestDispatcher("error.jsp"); 

和 


@WebServlet (name = "sdServlet",urlPatterns = "/sd.do") 
public class sdServlet extends HttpServlet { 


protected void doGet (HttpServletRequest req, HttpServletResponse resp) 
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throws ServletException, IOException { 
ServletContext sc=req.getSservletContext (); 
sc.setAttribute ("name", "小 明 "); 
resp.sendRedirect ("index.jsp"); 


, 
以 下 是 indexjsp: 


<% String name= ? 
out .print (name); 
务 > 


index.jsp 页 面 中 获取 name 数据 的 正确 写法 是 (  )。 
A. (String)request.getAttribute("name") 
B. (String)application.getAttribute("name") 
C. request.getAttribute("name") 
D. application.getAttribute("name") 
4. ( ”) 是 同 应 答 相关 的 HttpServletResponse 类 的 一 个 对 象 ， 它 封装 了 服务 器 对 客户 
端的 响应 ， 然 后 被 送 到 客户 端 以 响应 客户 的 请 求 。 
A. request B. pageContext 
C. response D. out 
5. 要 在 JSP 中 使 用 ArrayList， 正 确 的 做 法 是 (  )。 
A. <%@ page import ="jJava.util.ArrayList" %> 
B. <% import java.util.ArrayList %> 
C. <%@ import "java.util.ArrayList" %> 
D. <%@ page package="java.util.ArrayList" %> 


二 、 实 际 操作 题 
进行 用 户 模块 的 持久 层 、 业 务 逻 辑 层 、 控 制 层 、 视 图 层 方 法 设计 ， 实 现 子 类 商品 分 页 


显示 功能 。 


第 五 章 商品 显示 模块 设计 .pptx 
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知识 能 力 目标 
. 学 会 利用 Servlet 读 取 表 单数 据 和 session 对 象 数据 ， 
. 了 解 用 户 注册 的 SQL 语句 、 步 骤 、 完 成 要 求 及 应 注意 的 问题 。 
.了解 用 户 登 录 的 SQL 语句 、 步 又 、 完 成 要 求 及 应 注意 的 问题 。 
. 了解 用 户 积分 的 奖励 办 法 。 
. 掌握 用 户 修改 个 人 密码 的 流程 设计 。 
. 能 够 完成 用 户 注册 各 项 要 求 的 编码 设计 。 
. 能 够 完成 用 户 登 录 各 项 要 求 的 编码 设计 。 
. 能 够 完成 用 户 积分 模块 的 编码 设计 。 
. 能 够 完成 用 户 修改 密码 的 编码 设计 。 
了 问题 提示 1 
电子 商务 平台 几乎 家 家 都 有 积分 ， 积 分 是 商家 为 了 刺激 消费 者 消费 ， 是 一 种 变相 营销 
的 手段 。 积 分 一 般 是 用 户 在 商城 购物 时 由 商城 根据 用 户 购物 的 多 少 给 用 户 的 奖励 。 积 分 有 
很 多 用 途 ， 不 仅 在 购买 商城 商品 时 可 用 于 抵 现 (100 商城 积分 =] 元 )， 更 可 在 商城 积分 频道 
以 及 相关 活动 中 直接 兑换 超 值 商品 。 淘 宝 商 城 积分 可 以 在 积分 兑换 频道 参与 积分 秒杀 、 积 
分 兑换 、 积 分 加 钱 购 等 多 项 活动 ， 并 且 在 购物 时 可 以 抵 现 。 
问题 : 电子 商城 中 积分 获取 的 规则 是 什么 ?用户 怎么 查看 自己 的 积分 ? 


第 一 节 用户 注册 子 模块 设计 
而 一 、 用 户 注册 的 流程 


用 户 注册 功能 对 于 电子 商务 网 站 的 重要 性 毋庸 置 疑 ， 注 册 模 块 是 设计 中 比较 复杂 的 一 
个 模块 。 用 户 注册 的 基本 流程 : 输入 用 户 信息 ; 对 用 户 输入 的 信息 进行 前 台 校 验 (用 户 名 校 
验 、 验 证 码 校 验 、 密 码 、 手 机 号 、 注 册 时 间 )， 控制 层 得 到 用 户 输入 信息 ， 校 验 用 户 输入 信 
息 ， 系统 将 会 员 信息 录入 数据 库 ， 给 注册 用 户 一 定 的 积分 奖励 。 


| 局 二 、 基 础 知识 
(一 ) 利 用 Servlet 读 取 表 单数 据 
(1) request.getParameter(String name): 此 方法 用 来 获取 表单 参数 的 值 。 
(2) request.getParameterValues(String name): 如 果 参 数 出 现 一 次 以 上 ， 则 调用 该 方 
法 ， 并 返回 多 个 值 ， 例 如 复 选 框 。 


(3) request.getParameterNames(): 如 果 想 要 得 到 当前 请 求 中 的 所 有 参数 的 完整 列 ， 则 
调用 该 方法 。 


oo 让 wm 一 
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(二 ) 利 用 Servlet 读 取 session 对 象 数据 


(1) HttpSession session =request.getSession(): 获取 session 。 

(2) Useruser=(User)session.getAttribute(String name): 读 取 session 对 象 。 

(3) Session.setAttribute(String name,Object obj): 给 session 对 象 赋 值 。 

(4) session.removeAttribute(String name): 删除 当前 session。 

(5) session. invalidate(): 注销 当前 的 session。 

用 户 更 改 信息 的 流程 : 信息 有 误 一 提交 修改 信息 一 后 台 检 验 一 调用 业务 逻辑 层 方法 更 
新 用 户 信息 。 


同 三 、 用 户 注册 功能 实现 


(一 ) 用 户 注册 子 模块 持久 层 设计 
1. 接口 类 设计 
在 com.qzmall.dao 包 下 ， 新 建 接口 类 IUserDao: 


public interface IUserDao { 
// 注 册 用 户 信息 接口 
public boolean addUser (User user); 
// 用 户 积分 接口 
public boolean addPoint (Point point); } 


2. 接口 实现 类 设计 

在 com.qzmall.dao.impl 类 下 创建 接口 实现 类 UserDaoImpl: 

public class UserDaoImpl implements IUserDao { 

/* 

(1) 用 户 注册 。 

该 方法 用 来 实现 往 用 户 表 插 入 一 条 记录 ， 以 User 对 象 为 参数 ， 返 回 结果 为 布尔 类 型 ， 


通过 调用 数据 库 操作 类 中 的 方法 DBUtil.executeUpdate 执行 更 新 SQL 语句 ， 如 果 影 响 记录 
数 大 于 0， 返回 trtue， 否 则 返回 false。 主 要 代码 如 下 : 


人 

@Override 

public boolean addUser (User user) { 
String strSql = "insert into user 


(username, password, birthday,adddate, question,answer, point, truename, phone, 
Postcodeyaddress) valuss (27? ?7272/2 全 2 DY 芝 

return DBUtil .executeUpdate (strSgql, user.getUsername(),user.getPassword(), 
user.getBirthday() ,user.getAdddate () ,user.getQuestion(),user.getAnswer (), 
user.getPoint (),user.getTruename () ,user.getPhone(),user.getPostcode () ,user. 
getAddress()) > 0; 
i 
/ 二 
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(2) 用 户 积分 维护 。 
该 方法 的 主要 作用 是 当 用 户 注册 成 功 后 或 购物 成 功 后 ， 随 之 往 用 户 积分 表 添 加 一 条 记 
录 ， 以 记录 用 户 积分 信息 。 代 码 如 下 : 


2 
@Override 
public boolean addPoint (Point point) { 

String strSql = "insert into point 
(username, orderid,mypoint,pointtime,description) values (2?,2,2,2,2)"; 

return DBUtil.executeUpdate (strsql, point.getUsername(), 
point.getOorderid(), point.getMypoint(), point.getPointtime(), 
point.getDescription()) > 0; 

} 


} 
(二 ) 用 户 注册 子 模块 业务 逻辑 层 设计 
1. 接口 类 设计 
在 com.qzmall.service 包 下 新 建 TUserService 类 ， 接 口 类 设计 的 方法 与 持久 层 相 同 ， 这 
里 不 再 效 述 。 
2. 接口 实现 类 设计 
在 com.qzmall.service.impl 包 下 建立 接口 实现 UserServiceImpl 类 。 具 体 代码 如 下 : 


public class UserServiceImpl implements IUserService { 
@Override 
public boolean addUser (User user) { 
IUserDao userDao=new UserDaoImpl (); 
return userDao.addUser(user); } 
@Override 
public boolean addPoint (Point point) { 
IUserDao userDao=new UserDaoImpl (); 
return userDao.addPoint (point); } 


和 
(三 ) 用 户 注册 子 模块 控制 层 设计 
在 com.qzmall.servlet.user 包 下 新 建 AddUserServlet 类 。 具 体 代 码 如 下 : 


@Webservlet (name = "AddUserServlet",urlPatterns = "/addUserServlet .do") 
public class AddUserServlet extends HttpServlet { 
private static final long serialVersionUID = 1L; 
// 用 来 表明 类 的 不 同 版 本 间 的 兼容 性 
@Override 
protected void doPost (HttpServletRequest req, HttpServletResponse 
resp) throws ServletException, IOExceptiont{ 
Point point=new Point(); 
IUserService userService=new UserServiceImpl (); 
String username=req.getParameter ("username"); 
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if (userService.getUserByUsername (Username) ) { 

String result=" 用 户 名 错误 "; 
req.setAttribute ("erroruser", result); 
req.getRequestDispatcher ("register.jsp") .forward (req, resp);} 


} 


String password=req.getParameter ("password"); 
String truename=req.getParameter ("truename"); 
String phone=req.getParameter ("phone"); 
String address=req.getParameter ("address"); 
String birthday=req.getParameter ("birthday"); 
String postcode=req.getParameter ("postcode"); 
String code=req.getParameter ("yzm"); 
int question=Integer.parseInt (req.getParameter ("question")); 
String answer=req.getParameter ("answer"); 
point.setorderid(""); 
point.setUsername (username); 
point .setDescription ("注册 奖励 积分 "); 
point.setMypoint (15); 
point.setPointtime (StringHelper.getCurrentFormatDate ()); 
User user=new User(); 
user.setUsername (username); 
user.setPassword (StringHelper .MD5 (password)); 
user.setAddress (address); 
user.setPhone (phone); 
user.setTruename (truename); 
user.setQuestion (question); 
user.setAnswer (answer); 
user.setPostcode (postcode); 
user.setBirthday (birthday); 
user.setAdddate (StringHelper.getCurrentFormatDate()); 
user.setPoint (0); 
if (userService.addUser (user)) { 
userService.addPoint (point); 
String result = " 巷 喜 你 ， 注 册 成 功 ! "; 
req.setAttribute ("msg", result); 
req.getRequestDispatcher ("result.jsp") .forward (req, resp); 
} else { 
String result = "注册 失败 ! "; 
req.setAttribute ("msg", result); 
req.getRequestDispatcher ("result.jsp") .forward (req, resp); 
} } 


【代码 说 明 】 


当 用 户 在 用 户 注册 页 


小 提示 : 什么 是 ORM 
对 象 关系 映射 (Object Relational Mapping，ORM) 是 一 种 程序 技术 ， 用 于 实现 面向 对 象 


第 六 章 


(register.jsp) 输 入 用 户 信 息 后 ， 单 击 “ 注 册 ” 按 钮 ， 就 会 交 给 
AddUserServlet 进行 处 理 ， 代 码 首 先 判断 用 户 输 入 的 用 户 名 是 否 合法 ， 如 果 输 入 正确 ， 执 
行 插 入 语句 ， 注 册 成 功 之 后 ， 奖 励 用 户 15 积分 ， 并 添加 到 积分 记录 表 (point) 中 。 
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编程 语言 里 不 同类 型 系统 的 数据 之 间 的 转换 。 从 效果 上 说 ， 它 其 实 是 创建 了 一 个 可 在 编程 
语言 里 使 用 的 “虚拟 对 象 数据 库 ” 。 

面向 对 象 是 在 软件 工程 基本 原则 (如 耦合 、 聚 合 、 封 装 ) 的 基础 上 发 展 起 来 的 ， 而 关系 
数据 库 则 是 从 数学 理论 发 展 而 来 的 ， 两 套 理论 存在 显著 的 区 别 。 为 了 解决 这 个 不 匹配 的 现 
象 ， 对 象 关 系 映 射 技术 应 运 而 生 。 

对 象 关系 映射 提供 了 概念 性 的 、 易 于 理解 的 模型 化 数据 的 方法 。ORM 方法 论 基于 三 
个 核心 原则 : 简单 一 一 以 最 基本 的 形式 建 模 数据 。 传 达 性 一 一 数据 库 结构 被 任何 人 都 能 理 
解 的 语言 文档 化 。 精 确 性 一 一 基于 数据 模型 创建 正确 标准 化 的 结构 。 典型 地 ， 建 模 者 通过 
收集 来 自 那些 熟悉 应 用 程序 但 不 熟悉 数据 建 模 的 人 的 信息 开发 信息 模型 。 建 模 者 必须 能 够 
用 非 技 术 企 业 专家 可 以 理解 的 术语 在 概念 层次 上 与 数据 结构 进行 通信 。 建 模 者 也 必须 能 以 
简单 的 单元 分 析 信 息 ， 对 样本 数据 进行 处 理 。ORM 专门 被 设计 为 改进 这 种 联系 。 

简单 地 说 ，ORM 相当 于 中 继 数 据 。 具 体 到 产品 上 ， 例 如 ADO.NET Entity Framework。 
DLINQ 中 实体 类 的 属性 [Table] 就 算是 一 种 中 继 数 据 。 


(四 ) 用 户 注册 子 模块 视图 层 一 一 注册 网 页 (register.jsp) 设 计 
代码 如 下 : 


<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 
<!DOCTYPE html> 
<html> 
<head> 

<meta charset="utf-8" /> 

<meta http-equiv="X-UA-Compatible" content="ie=edge"> 

<title> 会 员 注 册 </title> 

<link type="text/css" rel="stylesheet" href="css/font-awesome.css"> 

<link type="text/css" rel="stylesheet" href="css/font- 
awesome.min.css"> 

<link type="text/css" rel="stylesheet" href="css/reset.css"> 

<link type="text/css" rel="stylesheet" href="css/register.css"> 

<script 
src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 

<script type="text/javascript" 
src="js/My97DatePicker/WdatePicker.js"></script> 

<script type="text/javascript" src="js/register.js"></script> 
</head> 
<body> 
<jsp:include page="head.jsp"/> 
<div class="page-wrap"> 

<div class="w"> 

<div class="user-con"> 
<div class="user-title"> 用 户 注 册 </div> 
<form class="form-horizontal" role="form" id="registerForm" 
action="addUserServlet .do™" 
method="post" novalidate="novalidate" onsubmit="return 
checkForm();" > <!--onsubmit="return checkForm();" --> 
<div class="user-box"> 
<div class="user-item"> 
<iabel class="user-label” for="username"> 
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<i class="fa fa-user"></i> 
</label> 
<input class="user-content" id="username" placeholder=" 请 输入 用 户 名 " 
name="username" autocomplete="off" 
onblur="checkUsername ();" onfocus="checkHideUsername ();" /> 
<span id="spanl" > 用 户 名 </span> 
</div> 
<div class="user-item"> 
<label class="user-label" for="passwordl1l"> 
<i class="fa fa-lock"></i> 
</label> 
<input class="user-content" id="passwordl" 
name="password" placeholder=" 请 输入 密码 " autocomplete="off" 
type="password"> 
</div> 
<div class="user-item"> 
<label class="user-label" for="password2"> 
<i class="fa fa-lock"></i> 
</label> 
<input class="user-content" id="password2" name="password2" 
placeholder=" 请 再 次 输入 密码 " autocomplete="off" type="password"> 
</div> 
<div class="user-item"> 
<label class="user-label" for="truename"> 
<i class="fa fa-user-plus"></i> 
</label> 
<input class="user-content" id="truename" name="truename" 
placeholder=" 请 输入 真实 姓名 " autocomplete="off"> </div> 
<div class="user-item"> 
<label class="user-label" for="phone"> 
<i class="fa fa-phone"></i> 


</label> 
<input class="user-content" id="phone" name="phone" placeholder=" 请 输入 
手机 号 " autocomplete="off"> 
</div> 


<div class="user-item"> 
<label class="]label-quest" > 
<i class="fa fa-question"></i> 
</label> 
<select name="question" id="question" class="user-quest"> 
<option value="" selected> 请 输入 密码 问题 </option> 
<option value="1"> 你 的 中 学 名 字 </option> 
<option value="2"> 你 的 母亲 名 字 </option> 
<option value="3"> 你 喜欢 的 人 物 是 谁 </option> 
<option value="4"> 你 父亲 的 生日 </option> 
</select> 
</div> 
<div class="user-item"> 
<label class="user-label" for="answer"> 
<i class="fa fa-key"></i> 
</label> 
<input class="user-content" id="answer" name="answer" placeholder=" 请 输 
入 密码 提示 问题 答案 " 
autocomplete="off"> 
</div> 
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<div class="user-item"> 
<label class="user-label™" for="postcode"> 
<i class="fa fa-barcode"></i> 
</label> 
<input class="user-content" id="postcode" name="postcode" 
placeholder=" 请 输入 邮编 " autocomplete="off"> 
</div> 
<div class="user-item"> 
<label class="user-label" for="address"> 
<i class="fa fa-home"></i> 
</label> 
<input class="user-content" id="address" name="address" 
placeholder=" 请 输入 邮寄 地 址 " autocomplete="off"></div> 
<div class="user-item"> 
<label class="user-label" for="birthday"> 
<i class="fa fa-birthday-cake"></i> 
</label> 
<input class="user-content" id="birthday" name="birthday" 
placeholder=" 请 输入 出 生日 期 " autocomplete="off" 
onclick="WdatePicker()";> </div> 
<button type="submit" class=" btn btn-submit"> 注 册 </button> 
</div> 
</form> 
<div class="link-item"> 
<a href="login.jsp" class="]link"” > 已 有 账号 ， 去 登录 </a> 
</div> 
</div> 
</div> 
</div> 
<jsp:include page="foot.jsp"/> 
</body> 
</html> 


注册 页 面 的 运行 效果 如 图 6-1 所 示 。 


QZMALL | 钊 未 


6-1 用 户 注册 页 面 


【代码 说 明了】 
(1) onclick="WdatePicker0" 函 数 的 作用 是 当 用 户 单 击 生日 输入 框 时 出 现 日 期 控件 ， 这 


个 日 期 控件 是 用 jQuery 编写 的 ， 使 用 时 必须 先 引 上 
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<script type="text/javascript" 
src="js/My97DatePicker/WdatePicker.js"></script> 


(2) checkForm() 函 数 的 作用 是 当 用 户 单 击 “ 提 交 ” 按 钮 时 ， 会 先 在 前 台 对 用 户 输入 的 
各 种 信息 进行 合法 性 验证 ， 比 如 : 用 户 名 只 能 为 英文 或 数字 ， 且 不 能 以 数字 打头 ， 长 度 为 
4 一 20 个 字符 ， 密 码 长 度 不 小 于 6 位 ， 另 外 还 对 手机 号 、 邮 编 、 邮 寄 地 址 进行 了 验证 ， 当 
输入 各 种 信息 后 ， 单 击 “ 注 册 ” 按 钮 ， 出 现 注册 成 功 提示 信息 ， 如 图 6-2 所 示 ， 表 明 注 册 


。 代 码 如 下 : 


成 功 。 
ZE [Er 
世 训 你 ， 注 册 成 功 ! 
图 6-2 ”注册 成 功 
课堂 技能 训练 : 
【 实 训 操作 内 容 】 完 成 用 户 注册 功能 。 
【 实 训 操作 步骤 】 


(1) 持久 层 设 计 (重点 )。 
(2) 业务 逻辑 层 设计 。 


(3) 控制 


层 设计 (重点 )。 


【知识 拓展 】 
本 节 只 是 简单 实现 了 用 户 注册 的 功能 ， 大 多 数 网 站 当中 ， 对 用 户 注册 信息 的 要 求 非常 
严格 ， 由 此 实现 起 来 也 非常 复杂 。 比 如 : 注册 时 需要 登录 邮箱 进行 验证 ， 需 要 输入 手机 验 
证 码 ， 需 要 输入 用 户头 像 和 身份 证 ， 需 要 输入 个 人 爱好 等 多 项 信息 ， 不 但 对 输入 信息 进行 
前 台 验 证 ， 还 要 进行 后 台 验 证 。 有 兴趣 的 读者 可 以 在 完成 简单 功能 的 基础 上 ， 再 尝试 完成 


以 上 这 些 功能 


第 二 节 用 户 登录 子 模块 设计 
习 一 、 用 户 登录 基本 流程 
Web 上 的 用 户 登录 功能 是 最 基本 的 功能 ， 网 页 中 用 户 的 登录 作用 和 其 他 任何 方面 的 全 
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录 作 用 相同 ， 这 里 只 是 一 个 身份 认证 机 制 。 比 如 修改 用 户 信息 ， 进 行 购物 ， 没 有 登录 的 用 
户 是 不 能 进行 这 些 操作 的 。 


用 户 登 录 流程 输入 用 户 名 和 密码 ;前 台 检 验 ， 控 制 层 得 到 用 户 输入 的 信息 并 调用 业 


务 逻 辑 类 登录 方法 实现 登录 功能 ， 登 录 成 功 后 ， 首 页 应 显示 登录 用 户 名 ,并 可 以 退出 


| 季 二 、 用 户 登 录 功 能 的 实现 


(一 ) 用 户 登 录 子 模块 持久 层 设计 
1. 接口 类 设计 
在 com.qzmall.dao.IUserDao 类 下 新 增 以 下 方法 : 


public interface IUserDao { 
// 用 户 登录 的 接口 
//return (1: 用 户 名 错误 ;2: 密码 错误 ;3: 正确 ) 
public User login(User user); 
} 


2. 持久 层 接口 实现 类 方法 设计 
在 com.qzmall.dao.impl.UserDaoImpl 类 下 实现 接口 方法 : 


public class UserDaoImpl implements IUserDao { 


/* 
该 方法 用 来 实现 用 户 登 录 功 能 ， 以 User 对 象 为 参数 ， 通 过 调用 数据 库 操作 类 中 的 方法 


DBUtilexecuteQuery 执行 查询 SQL 语句 ， 如 果 记 录 数 大 于 0， 返 回 结果 为 User 对 象 ， 主 
要 代码 如 下 : 
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wh 
@Override 
public User login(User user) { 
String strSql = "select * from user where username=? and password=?2"; 
return (User)DBUtil.executeQuery (strSsql, new IResultSetUtil() 
{ @Override 
public Object doHandler (ResultSet rs) throws SQLException { 
if (rs.next()) { 
User userl = new User(); 
userl.setUsername (rs.getstring ("username")); 
userl.setTruename (rs.getstring ("truename")); 
return userl; } 
return null;} 
},user.getUsername (),user.getPassword()); } 
E 


(二 ) 用 户 登录 子 模块 业务 逻辑 层 设计 
1. 接口 类 方法 设计 
接口 类 方法 放 在 com.qzmall.service.IUserService 类 下 ， 接 口 类 设计 的 方法 与 持久 层 相 
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同 ， 这 里 不 再 歼 述 。 
2. 接口 实现 类 方法 设计 
接口 实现 类 方法 放 在 com.qzmall.service.impl.UserServiceImpl 类 下 ， 具 体 代 码 如 下 : 


public class UserServiceImpl implements IUserService { 
@Override 
/* 
登录 的 实现 方法 
return (1: 用 户 名 错误 2: 密码 错误 3: 正确 ) 
这 的 
public User login(User user) { 
IUserDao userDao=new UserDaoImpl (); 
return userDao.login(user); 


} 
(三 ) 验 证 码 类 (com.qzmall.util.yzm) 设 计 
代码 如 下 : 


package com.qzmall.util; 
public class yzm { 
public static String drawImageVerificate (HttpServletResponse 
resp) { // 定 义 验证 码 的 宽度 和 高 度 
int width = 100,height = 30; 
// 在 内 存 中 创建 图 片 
BufferedImage image = new 
BufferedImage (width,height,BufferedImage .TYPE INT RGB); 
// 创 建 图 片 的 上 下 文 
Graphics2D g = image.createGraphics (); 
// 产 生 随 机 对 象 ， 此 随机 对 象 主要 用 于 算术 表达 式 的 数字 
Random random = new Random() 
// 设 置 背景 
9.setColor (getRandomColor (240,250)); 
// 设 置 字体 
g.setFont (new Font (" 微 软 雅 黑 "， Font .PLAIN,22) ) ; 
// 开 始 绘制 
g.fillRect (0,0,width,height); 
// 干 扰 线 的 绘制 ， 绘 制 线条 到 图 片 中 
g.setColor (getRandomColor (180,230)); 
for (int i=0;i<10;i++){ 
二 下 在 区 random.nextInt (width) 
int y = random.nextInt (height) 7 
int xl = random.nextInt (60); 
int yl = random.nextInt (60); 
g-.drawLine (x,y, zl1,y1); 
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} 

// 开 始 进行 对 算术 验证 码 表达 式 的 拼接 

int numl = (int) (Math.random()*10 + 1) 7 
int num2 = (int) (Math.random()*10 + 1); 
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int fuhao = random.nextInt (3) ;// 产 生 一 个 [0，2] 之 间 的 随机 整数 
// 记 录 符 号 

String fuhaostr = null; 

int result = 0; 

Switch (fuhao){ 


case 0 : fuhaostr = "+";result = numl + num2;break; 
case 1: fuhaostr = "-";result = numl - num2;break; 
case 2 : fuhaostr = "*";result = numl * num2;break; 


//case 3 : fuhaostr = "/";result = numl / num2;break; 
L 
// 拼 接 算术 表达 式 ， 用 户 图 片 显 示 
String calc = numl + " " + fuhaostr +" "+ num2 +" = ?2"7 
// 设 置 随机 颜色 
g-.setColor (new Color (20+random.nextInt (110),20+random.nextInt (110), 
20+random.nextInt (110))); 
// 绘 制 表达 式 
g.drawstring (calc,5,25); 
// 结 束 绘制 
g-.dispose(); 
try { 
// 输 出 图 片 到 页 面 
ImageIO.write (image, "JPEG", resp.getoutputstream()); 
return String.valueOf (result); 
}catch (Exception ex){ 
ex.printstackTrace () 7 
return null; 


} 


/* 
* 范围 随机 颜色 
public static Color getRandomColor (int fc,int bc){ 
// 利 用 随机 数 
Random random = new Random(); 


// 随 机 颜色 ， 了 解 颜色 -Color (red, green,blue) .rgb 三 原色 0-255 
if (fc>255)fc = 255; 

if (bc>255)bc = 255; 

int r = fc+random.nextInt (bc-fc); 

int g = fc+random.nextInt (bc-fc); 

ne fc+random.nextInt (bc-fc); 

return new Color(r,g,b); 


} 

小 提示 : 验证 码 的 作用 

验证 码 可 以 有 效 防止 某 个 黑客 对 某 一 个 特定 注册 用 户 用 特定 程序 暴力 破解 方式 进行 不 
断 的 登录 尝试 ， 实 际 上 使 用 验证 码 是 现在 很 多 网 站 通行 的 方式 (比如 招商 银行 的 网 上 个 人 银 
行 、 百 度 社区 )， 利 用 比较 简易 的 方式 实现 了 这 个 功能 。 
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(四 ) 用 户 登录 子 模块 控制 层 一 一 用 户 登录 功能 设计 
在 com.qzmall.servlet.user 包 下 新 建 LoginServlet 类 ， 主 要 代码 如 下 : 


@WebServlet (name = "LoginServlet",urlPatterns ="/login.do" ) 
public class LoginServlet extends HttpServlet { 
private static final long serialVersionUID = 1L; 
// 用 来 表明 类 的 不 同 版 本 间 的 兼容 性 
@Override 
protected void doPost (HttpServletRequest req, HttpServletResponse 
resp) throws ServletException, IOException { 
HttpSession session = req.getSession(); 
String result=""; 
User userl=new User(); 
// 获 取 用 户 传递 过 来 的 验证 码 、 用 户 名 
String code = req.getParameter ("code"); 
userl.setUsername (req.getParameter ("username")); 
// 把 获取 到 的 用 户 的 密码 用 MD5 方法 进行 加 密 
Userl.setPassword(StringHelper.MD5 (req.getParameter ("password") ) ) 
// 获 取 验 证 码 框架 产生 的 验证 码 (会 话 中 存储 的 验证 码 ) 
String sessionCode = (String) session.getRttribute ("result") 7 
if(code!=null&gsessionCode!=nul1l) { 
// 如 果 用 户 输入 的 验证 码 和 产生 在 服务 器 端的 验证 码 一 致 ， 那 么 就 告诉 用 户 输入 正确 
if (code.equalsIgnoreCase(sessionCode)) { 
// 调 用 业务 逻辑 处 理 类 
IUserService userService = new UserServiceImpl (); 
// 接 收 返回 的 结果 
User user=userService.login (userl1); 
if (user!=null) { 
// 用 户 名 和 密码 都 正确 
// 把 用 户 名 存 入 到 session 中 
req.getSession() .setAttribute ("user", user); 
session.setMaxInactiveInterval (3600); 
result="3"; 
} 
elsef{ 
result="2"; 
} 
} else { 
result="4"; 
} 
} 
Fresp.getWriter () .print (result); 
PrintWriter out = resp.getWwriter(); 
} 
| 


【代码 说 明 】 
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当 用 户 在 登录 页 面 (loginjsp) 输 入 用 户 名 和 密码 及 验证 码 之 后 ， 就 会 交 给 LoginServlet 
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进行 处 理 。 如 果 验 证 码 错 误 ， 则 返回 4， 如 果 用 户 名 、 密 码 正确 则 返回 3， 如 果 用 户 名 、 
密码 错误 则 返回 2。 


(五 ) 用 户 登 录 功 能 视图 层 设计 
1. 用 户 登录 页 面 (login.jsp) 设 计 
代码 如 下 : 


<%@ taglib prefix="c" url="http://java.sun.com/jsp/jstl/core" $%> 
<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title> 秦 职 电 商 平台 </title> 
<link type="text/css" rel="stylesheet" href="css/font-awesome.css"> 
<link type="text/css" rel="stylesheet" href="css/reset.css"> 
<link type="text/css" rel="stylesheet" href="css/login.css"> 
</head> 
<body> 
<jsp:include page="head.jsp"/> 
<div class="page-wrap"> 
<div class="w"> 
<div class="user-con"> 
<div class="user-title"> 用 户 登录 </div> 
<p class="err-msg">$ {msg}</p> 
<div class="user-box"> 
<div class="error-item"> 
<i class="fa fa-minus-circle error-icon"></i> 
<p class="err-msg">$ {msg}</p> 
</div> 
<div class="user-item"> 
<label class="user-label" for="username"> 
<i class="fa fa-user"></i> 
</label> 
<input class="user-content" id="username" placeholder=" 请 输入 用 户 名 " 
autocomplete="off"> 
</div> 
<div class="user-item"> 
<label class="user-label" for="password"> 
<i class="fa fa-lock"></i> 
</label> 
<input class="user-content" id="password" placeholder=" 请 输入 密码 " 
autocomplete="off" type="password"> 
</div> 
<div class="user-item"> 
<label class="label-yzm" for="yzm"> 
<i class="fa fa-key"></i> 
</label> 
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<input class="user-yzm"” id="yzm"” placeholder=" 请 输入 验证 码 " 
autocomplete="off"> 

<img class="yzm-img" src="code.jsp" alt="" id="code" 
onclick="javascript:changeCode();" > 


</div> 
<input type="submit" class="btn btn-submit" value=" 登 录 "> 
</div> 
</div> 
</div> 

</div> 

<jsp:include page="foot.jsp"/> 

</body> 


<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> 
<script type="text/javascript" src="js/login.js"></script> 

<script> 

<!-- 刷新 验证 码 --> 

function changeCode() { 

document .getElementById ("code") .src = "code.jsp?d="+new 

Date () .getTime (); } 


</script> 全 
</html> 国 
2. login.js 代码 设计 

代码 如 下 : 


$(function() { 
$(".btn-submit") .click (function() { 
Var username = $("#username"); 
Var code=$ ("#yzm"); 
Var password = $("#password"); 
if (username.val() == "") { 
alert ("用 户 名 不 能 为 空 ") ; 
username.focus(); 
return false; } 
if (password.val() == "") { 
alert ("密码 不 能 为 空 ") ; 
password.focus(); 
return false; } 
if (code.val() == "") { 
alert ("验证 码 不 能 为 空 ") ; 
code.focus(); 
return false; } 
$.ajax({ 
async:false, 
cache:false, 
Dr “loginedo" 
type : "POST"， 
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data : { 
"username" : username.val(), 
"password" : password.val(), 
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"code"n :code.val()， 
"time" : new Date () .getTime()}, 
dataType : "json", 
success : function (result) { 
Ff (result == 9) 
$(".error-item") .css('display', 'block') 
$(".error-item .err-msg") .html ("密码 或 用 户 名 错误 "); 
return false; 
} else if (result == 3) { 
// 正 确 
location.href ="'index.do';} 
else if (result ==4 ) { 
$(".error-item") .css('display', 'block') 
$ (".error-item .err-msg") .html ("验证 码 输入 错误 "); 
return false; } 
}, 
error : function(er) { 
console.1log (er); 
} 
Bs 
1D); 
i 


【代码 说 明 】 

首先 对 用 户 输入 的 用 户 名 、 密 码 、 验 证 码 进行 非 空 校 验 ， 然 后 以 异步 请 求 方式 通过 调 
用 login.do 进行 登录 验证 ， 验 证 完成 后 ， 返 回 结果 信息 ， 如 果 返 回 3， 表 明 用 户 名 和 密码 
输入 正确 ， 可 以 登录 首页 。 

登录 页 面 的 运行 效果 如 图 6-3 所 示 。 
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图 6-3 用 户 登 录 页 面 
3. 验证 码 (Codejsp) 页 面 设计 
代码 如 下 : 


<%@ page import="com.qzmall.util.yzm" %> 
<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
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< 条 
/* 目 的 是 清空 浏览 器 缓存 ， 因 为 浏览 器 会 对 网 站 的 资源 文件 和 图 像 进行 记忆 存储 ， 如 果 被 浏览 器 加 
载 过 的 图 片 就 记忆 起 来 ， 记 忆 以 后 文件 就 不 会 和 服务 器 再 交互 ， 如 果 我 们 验证 不 清空 的 话 可 能 会 造 
成 一 个 问题 : 验证 刷新 以 后 没有 效果 。*/ 
response.setHeader ("pragma", "no-cache"); 
response.setHeader ("cache-control", "no-cache"); 
response.setHeader ("expires", "0"); 
// 调 用 编写 的 生成 验证 码 的 工具 
String result = yzm.drawImageVerificate (response); 
session.setAttribute ("result", result); 
// 解 决 getoutputstream 异常 问题 
// out.clear(); 
// out = pageContext .pushBody (); 
务 > 


课堂 技能 训练 : 


【 实 训 操作 内 容 】 用 户 登 录 功 能 实现 。 

【 实 训 操作 步骤 】 

(1) 持久 层 设计 。 

(2) 业务 逻辑 层 设计 。 

(3) 控制 层 设计 。 

(4) 视图 层 设 计 。 

要 求 : 用 异步 请 求 方式 判断 验证 码 、 用 户 名 和 密码 输入 是 否 正确 。 


第 三 节 用户 个 人 中 心 子 模块 设计 


一 、 个 人 中 心 模块 主要 功能 和 基本 流程 


用 户 个 人 中 心 主要 功能 是 显示 和 修改 用 户 基 本 信息 、 修 改 个 人 密码 、 查 询 用 户 积分 。 
显示 用 户 个 人 信息 的 基本 流程 : 用 户 登录 个 人 中 心 : 显示 个 人 注册 信息 。 
修改 个 人 信息 的 基本 流程 用 户 登 录 个 人 中 心 ; 输入 个 人 信息 ; 前 台 检 验 密码 输入 是 


否 有 误 ; 提交 修改 信息 ; 后 台 检 验 ; 调用 业务 逻辑 层 方法 更 新 用 户 信息 。 


二 、 用 户 个 人 信息 维护 功能 实现 


(一 ) 用 户 个 人 信息 子 模块 持久 层 设计 
1. 接口 类 设计 
在 com.qzmall.dao.IUserDao 类 下 新 增 以 下 方法 : 


public interface IUserDao { 
// 查 询 用 户 信息 接口 


public User getUserByUser (String username); 
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// 更 新 用 户 信息 接口 


public boolean saveUserInfo (User user); 


} 


2. 持久 层 接口 实现 类 方法 设计 
在 com.qzmall.dao.impl.UserDaoImpl 类 下 实现 接口 方法 : 


public class UserDaoImpl implements IUserDao { 
/* 


(1) 显示 用 户 个 人 信息 。 
该 方法 用 来 实现 查询 表 user 记录 的 功能 ， 以 用 户 名 作为 参数 进行 查询 ， 查 询 结 果 封 装 


到 User 对 象 ， 主 要 通过 调用 DBUtil.executeQuery 查询 方法 执行 查询 语句 。 代 码 如 下 : 


Ee 
@Override 
public User getUserByUser (final String username) { 
String strSql = "select * from user where username=?"; 
return (User)DBUtil.executeQuery (strSql, new IResultSetUtil() 
{ public Object doHandler (ResultSet rs) throws SQLException 
{if (rs.next()) {User user = new User(); 
user.setUsername (rs.getstring ("username")); 
user.setPassword(rs.getstring ("password")); 
user.setTruename (rs.getstring ("truename")); 
user.setAnswer (rs.getSstring ("answer")); 
user.setQuestion(rs.getInt ("question")); 
user.setBirthday (rs.getstring ("birthday")); 
user.setPoint (rs.getInt ("point")); 
user.setPhone (rs.getstring ("phone")); 
user.setAddress (rs.getstring ("address")); 
user.setPostcode (rs.getstring ("postcode")); 
user.setAdddate (rs.getstring ("adddate")); 
return user; } 
return null;} 
} ,username);} 
/* 


(2) 修改 用 户 信息 。 
该 方法 用 来 实现 修改 用 户 表 user 中 用 户 记录 的 功能 ， 以 User 对 象 为 参数 ， 返 回 结果 


为 布尔 类 型 ， 通 过 调用 数据 库 操作 类 中 的 方法 DBUtil.executeUpdate 执行 更 新 SQL 语句 ， 
如 果 记 录 数 大 于 0， 返回 tue， 否 则 返回 false。 主 要 代码 如 下 : 
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SW 
@Override 
public boolean saveUserInfo(User user) { 
String strSql = "update user set truename=?, 
birthday=?, question=?,answer=?,phone=?,postcode=?,adder ss=? where 
username=2"; 
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return 
DBUtil .executeUpdate (strSql,user.getTruename () ,user.getBirthday () ,user. 
getQuestion(),user.getAnswer (),user.getPhone(),user.getPostcode(),user. 
getAddress(),user.getUsername())>0 ; } 

} 


(二 ) 用 户 个 人 信息 子 模块 业务 逻辑 层 设 计 

1. 接口 类 方法 设计 

接口 类 方法 放 在 com.qzmall.service.IUserService 类 下 ， 接 口 类 设计 的 方法 与 持久 层 相 
这 里 不 再 次 述 。 

2. 接口 实现 类 方法 设计 

接口 实现 类 方法 放 在 com.qzmall.service.impl.UserServiceImpl 类 下 ， 具 体 代码 如 下 : 


public class UserServiceImpl implements IUserService { 
// 根 据 用 户 账号 查询 用 户 信息 
@Override 
public User getUserByUser (String username ) { 
IUserDao userDao=new UserDaoImpl (); 
return userDao.getUserByUser (username); 


# 
// 根 据 用 户 账号 更 新 用 户 信息 
@Override 
public boolean saveUserInfo (User user) { 
IUserDao userDao=new UserDaoImpl (); 
return userDao.saveUserInfo(user); } 
j 


(三 ) 用 户 个 人 信息 子 模块 控制 层 方法 设计 
1. 查询 用 户 信息 
在 com.qzmall.servlet.user 包 下 新 建 UserInfoServlet 类 ， 主 要 代码 如 下 : 


@Webservlet (name = "UserInfoSsServlet",urlPatterns = "/userInfo.do") 
public class UserInfoServlet extends HttpServlet { 
private static final long serialVersionUID = 1L; 
QOverride 
protected void doPost (HttpServletRequest reqg, HttpServletResponse 
resp) throws ServletException, IOException { 
doGet (req, resp); } 
@Override 
protected void doGet (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
HttpSession session=req.getSession(); 
User userl= (User) session.getAttribute ("user"); 
IUserService userService=new UserServiceImpl (); 
User user=userService.getUserByUser (userl .getUsername ()); 
req.setAttribute ("user", user) 7 
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req.getRequestDispatcher ("userinfo.jsp") .forward (req, resp) 
} 
| 
【代码 说 明 】 
当 登 录用 户 在 leftjsp 页 单 击 个 人 中 心 链接 时 ， 就 会 交 给 UserInfoServlet 进行 处 理 ， 首 


先 得 到 session 用 户 对 象 user， 通 过 调用 业务 逻辑 对 象 类 userService.getUserByUser 
(userl.getUsermame()) 把 查询 结果 封装 到 user 对 象 中 。 
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2. 修改 保存 用 户 信息 
在 com.qzmall.servlet.user 包 下 新 建 UserInfoSaveServlet 类 。 有 具体 代码 如 下 : 


@WebServlet (name = "UserInfoSaveServlet",urlPatterns = 
"VuserInfoSsave .do") 
public class UserInfoSaveServlet extends HttpServlet { 
private static final long serialVersionUID = 1L; 
@Override 
protected void doPost (HttpServletRequest req, HttpServletResponse 
resp) throws ServletException, IOException { 
HttpSession session = req.getSession(); 
IUserService userService = new UserServiceImpl (); 
User userl= (User) session.getAttribute ("user"); 
String username=userl .getUsername (); 
String truename = req.getParameter ("truename"); 
String phone = req.getParameter ("phone"); 
String address = req.getParameter ("address"); 
String birthday = req.getParameter ("birthday"); 
String postcode = req.getParameter ("postcode"); 
int question = Integer.parseInt (req.getParameter ("question")); 
String answer = req.getParameter ("answer"); 
User user = new User(); 
user.setUsername (username); 
user.setAddress (address); 
user.setPhone (phone); 
user.setTruename (truename); 
user.setQuestion (question); 
user.setAnswer (answer); 
user.setPostcode (postcode); 
user.setBirthday (birthday); 
if (userService.saveUserInfo (user)) { 
String result = "修改 信息 成 功 ! "; 
req.setAttribute ("resu", result); 
req.getRequestDispatcher ("userIinfo.do") .forward (req, resp); 
} else { 
String result = "修改 信息 失败 ! "; 
req.setAttribute ("resu", result); 
req.getRequestDispatcher ("userInfo.do") .forward (req, resp); 
} 
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【代码 说 明 】 

当 登 录用 户 在 userinfo.jsp 页 提交 修改 的 个 人 信息 后 ， 就 会 交 给 UserInfoSaveServlet 进 
行 处 理 ， 它 首先 用 req 对 象 得 到 从 页 面 提交 的 用 户 信息 ， 并 把 它 封 装 到 user 对 象 中 ， 然 后 
调用 业务 逻辑 对 象 类 userService.saveUserInfo(user) 保 存 修改 结果 。 


(四 ) 用 户 个 人 信息 子 模块 视图 层 设 计 一 一 个 人 中 心 页 面 设计 
1. 左边 通用 页 (leftjsp) 页 面 设 计 
代码 如 下 : 


<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 
<html> 
<head> 

<link type="text/css" rel="stylesheet" href="css/left.css"> 
</head> 
<body> 
<ul class="nav-side"> 

<1i class="nav-item acive"> <a href="userInfo.do" class="1link"> 个 人 中 
心 </a></1i> 

<1i class="nav-item"> <a href="ordersInfo.do?currentPage=1" 
class="1link"> 我 的 订单 </a></1i> 

<li class="nav-item"> <a href="myPoint.do?currentPage=1" 
class="1ink"> 我 的 积分 </a></1i> 

<li class="nav-item"> <a href="modifypass.jsp" class="1link"> 修 改 密码 
</a></1i> 
</ul> 
</body> 
</html> 


2. 用 户 个 人 信息 页 (userinfo.jsp) 设 计 
代码 如 下 : 


<%@ taglib prefix="c" url="http://java.sun.com/jsp/jstl/core" %> 
<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title> 个 人 中 心 </title> 
<link type="text/css" rel="stylesheet" href="css/font-awesome.css"> 
<link type="text/css" rel="stylesheet" href="css/font-— 
awesome .min.css"> 
<link type="text/css" rel="stylesheet" href="css/reset.css"> 
<link type="text/css" rel="stylesheet" href="css/userinfo.css"> 
x3cript sre="jatiquiery=l-.11.2.min.3"></script> 
<script type="text/javascript" 
src="js/My97DatePicker/WdatePicker.js"></script> 
<script type="text/javascript" src="js/userinfo.js"></script> 
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</head> 
<body> 
<jsp:include page="head.jsp"/> 
<div class="crumb"> 
<div class="Ww"> 
<div class="crumb-con"> 
<a href="index.do" class="link">MMAIL</a> 
<span>></span> 
<span class="1link-text"> 个 人 中 心 </span> 
</div> 
</div> 
</div> 
<div class="page-wrap w"> 
<jsp:include page="left.jsp"/> 
<div class="content with-nav"> 
<div class="panel"> 
<div class="panel-title"> 个 人 中 心 gnbsp; gnbsp;<span 
id="spanl2">$ {resu}</span></div> 
<div class="panel-body"> 
<form name="formuserinfo" method="post" action="userInfoSave.do" 
onsubmit="return checkForm();"> 
<div class="form-line"> 
<span class="label"> 用 户 名 </span> 
<span class="text"><input type="text" id="username" 
name="username" value="$ {user.username}" onblur="checkUsername();" 
onfocus="checkHideUsername ();" readonly="readonly"/></span> 
<span id="spanl"></span> 
<span class="label"> 实 gnbsp; &nbsp; 名 : </span> 
<span class="text"><input type="text" id="truename" name="truename" 
value="$ {user.truename}"></span></div> 
<div class="form-line"> 
<span class="label"> 手 &gnbsp; &nbsp; 机 : </span> 
<span class="text"><input type="text" id="phone" name="phone" 
value="$ {user.phone}"></span> 
<span class="label"> 生 gnbsp; gnbsp; 日 : </span> 
<span class="text"> 
<input class="user-content" id="birthday" name="birthday" 
value="$ {user.birthday}" onclick="WdatePicker()";> 
</span> </div> 
<div class="form-line"> 
<span class="label"> 问 gnbsp; gnbsp; 题 : </span> 
<span class="text"> 
<select name="question" id="question" class="quest"> 
<option value="0" <c:if test="$ {user.question==0}"> 
selected="selected"</c:if>> 请 输入 密码 保护 问题 </option> 
<option value="1" <c:if test="$ {user.question==1}"> 
selected="selected"</c:if>> 你 的 中 学 名 字 </option> 
<option value="2" <c:if test="$ {user.question==2}"> 
selected="selected"</c:if>> 你 的 母亲 名 字 </option> 
<option value="3" <c:if test="$ {user.question==3}"> 
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selected="selected"</c:if>> 你 喜欢 的 人 物 是 </option> 
<option value="4" <c:if test="$ {user.question==4}"> 
selected="selected"</c:if>> 你 父亲 的 生日 </option> 
</select> 
</span> 
<span class="label"> 答 gnbsp; gnbsp; 案 : </span> 
<span class="text"><input type="text" id="answer" name="answer" 
value="$ {user.answer}"></span> 
</div> 
<div class="form-line"> 
<span class="label"> 地 gnbsp; gnbsp; 址 : </span> 
<span class="text"><input type="text" id="address" 
name="address" value="${user.address}"></span> 
&nbsp;<span class="label"> 注 册 日 期 : </span> 
<span class="text"><input type="text" id="adddate" 
name="adddate" value="$ {user.adddate}" readonly="true"></span> 
</div> 
<div class="form-line"> 
label"> 邮 &nbsp; gnbsp; 编 : </span> 
text"><input type="text" id="postcode" 
name="postcode" value="$ {user.postcode}"></span> 
</div> 
<div class="form-line"> 
<input type="submit" value=" 修 tnbsp; gnbsp; gnbsp; 改 " 
class="btn btn-submit"/> </div> 
</form> 
</div> 
</div> 
</div> 
</div> 
<jsp:include page="foot.jsp"/> 
</body> 
</html> 


用 户 个 人 信息 页 面 运 行 效果 如 图 6-4 所 示 。 
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图 6-4 用 户 个 人 信息 页 面 
【代码 说 明 】 


(1) 用 户 个 人 信息 页 (userinfojsp) 主 要 显示 登录 用 户 的 
UserInfoServlet 传 回 页 面 的 user 对 象 ， 然 后 采用 EL 标签 进行 解析 。 
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(2) 在 显示 密码 提示 问题 时 ， 用 表单 的 选择 框 <select></select> 进 行 显示 ， 既 要 显示 用 
户 注册 时 输入 的 密码 ， 还 要 方便 用 户 选择 修改 个 人 信息 。 这 里 显示 列表 项 时 ， 我 们 用 了 
JSTL 标签 条 件 选 择 标签 <option value="1" <c:if test="$ {user.question 一 1}">selected= 
"selected"</c:if>> 你 的 中 学 名 字 </option>， 可 以 方便 地 达到 上 述 要 求 。 

(3) <span id="span12">9$ {resu}</span></div> 这 段 代码 主要 用 于 数据 
新 信息 是 否 成 功 。 
如 上 : 把 毕业 中 学 更 改 为 “秦皇岛 市 一 中 ”， 单 击 “ 修 改 ” 按 钮 ， 出 现 如 图 6-5 所 示 
的 页 面 提示 ， 表 示 修 改 信息 成 功 。 


显 ， 提 示 用 户 更 
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6-5 ”提示 修改 信息 成 功 


课堂 技能 训练 : 

【 实 训 操作 内 容 】 用 户 个 人 信息 维护 功能 实现 。 
【 实 训 操 作 要 求 】 

(1) 持久 层 设 计 。 

(2) 业务 逻辑 层 设计 。 

(3) 控制 层 设计 。 

(4) 视图 层 设计 。 


课 后 训 练 


一 、 选 择 题 
1. 如 果 需 要 在 JSP 页 面 使 用 map 集合 ， 那 么 需要 导入 哪个 包 ， 怎 么 书写 ? (  ) 
A. <%@ page import = "java.map.* " %> 
B. <%@ page import=]java.util.* %> 
C. <%(@ import= "java.util.* " %> 
D. <%@ page import= "Java.util.* " %> 
2. 使 用 request 对 象 动 态 地 获取 工程 名 的 正确 写法 是 ( 站 
A. request.getServletContext() B. request.getServerName() 
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C. request. getContextPath() D. request.getServletContext().getContextPath() 
3. 编写 Servlet 的 service 方法 时 ， 需 要 抛 出 的 异常 是 ( 天 
A. ServletException, RemoteException 
B. ServletException , IOException 
C. HttpServletException, RemoteException 
D. HttpServletException , IOException 
4. 在 JSP 表单 中 包含 如 下 语句 : <input name:"password">， 表 单 提交 后 ， 想 要 在 
Servlet 中 获取 到 ， 应 该 使 用 HttpServletRequest 对 象 的 ( ) 方 法 。 
A. getParameter("password"):; B. getParameter(); 
C. getAttribute (); D. getAttribute("password"); 
5. 关于 转发 ， 以 下 说 法 正确 的 是 ( )。 
A. 转发 时 ， 浏 览 器 中 的 地 址 栏 url 会 发 生变 化 
B. 转发 调用 的 是 HttpServletRequest 对 象 中 的 方法 
C. 转发 调用 的 是 HttpServletResponse 对 象 中 的 方法 
D. 转发 时 浏览 器 只 请 求 一 次 服务 器 
6. 使 用 重 定向 时 ， 需 要 将 数据 带 到 跳 转 页 面 ， 可 以 使 用 ) 对 象 。 
A. request B. session C. page D. application 
7. request 对 象 可 以 使 用 ( ) 方 法 获取 表单 中 某 输入 框 提交 的 信息 ， 并 且 返 回 值 为 
String 类 型 。 
A. getParameter(String s) B. getValue(String s) 
C. getParameterNames(String s) D. getParameterValues(String s) 
8. 在 ajsp 页 面 中 有 如 下 代码 : pageContext.setAttribute("name",Smith)， 同 时 跳 转 到 
bjsp， 那 么 如 何在 b.jsp 页 面 中 获取 到 name 的 值 ? ( 。 ) 
A. pageContext.getAttribute("name") 
B. pageContext.getParameter("name") 
C. 其 余 说 法 均 不 正确 
D. request.getAttribute("name" 
9. 关于 session 域 的 说 法 错误 的 是 ( )。 
A. 可 以 调用 HttpSession 的 invalidate 方法 ， 立 即 销毁 session 域 
B. 当 Web 应 用 被 移 除 出 Web 容器 时 ，Web 容器 对 应 的 session 跟着 销毁 
C. session 域 的 作用 范围 为 整个 会 话 
DD. session 域 中 的 数据 只 能 存在 30 分 钟 ， 这 个 时 间 不 能 修改 
10. config 内 置 对 象 获取 配置 文件 的 初始 化 参数 的 正确 写法 是 ( 入 
A. config.getAtrribute() B. config.getParameter() 
C. config.getInit() D. config.getInitParameter() 
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11. 在 jsp 页 面 中 如 何 获 取 响 应 的 字符 编码 集 ? ( 。 ) 


A. response.setCharacterEncoding() B. request. getCharacterEncoding() 


C. response.getCharacterEncoding() D. request. setCharacterEncoding() 


二 、 实 际 操作 题 


进行 用 户 模块 的 持久 层 、 业 务 逻 辑 层 、 控 制 层 、 


视图 层 方 法 设计 ， 完 成 用 户 个 人 积分 
的 查看 、 个 人 密码 的 修改 功能 。 


第 六 章 习题 答案 .docx 第 六 章 用 户 模块 设计 .pptx 
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购物 车 与 订单 模块 设计 


电子 商务 网 站 建设 企业 案例 


知识 能 力 目标 
1. 掌握 LinkedHashMap 集合 类 的 使 用 方法 。 
2. 掌握 购物 车 的 主要 功能 和 实现 流程 。 
3. 掌握 订单 的 主要 构成 要 素 。 
4. 学 会 将 商品 添加 到 购物 车 及 在 购物 车 中 删除 商品 、 修 改 商 品 数量 与 清空 购物 车 等 方法 。 
5. 学 会 生成 订单 、 查 询 订 单 及 修改 订单 状态 的 设计 方法 。 


| 问题 提示 | 


购物 车 功能 指 的 是 应 用 于 网 店 的 在 线 购 买 功能 ， 它 类 似 于 超市 购物 时 使 用 的 推 车 或 篮 
子 ， 可 以 暂时 把 挑选 的 商品 放 入 购物 车 、 删 除 或 更 改 购买 数量 ， 并 对 多 件 商 品 进 行 一 次 性 
结 款 ， 是 网 上 商店 里 的 一 种 快捷 购物 工具 ， 使 用 购物 车 购物 是 需要 进行 登录 的 ， 只 有 这 样 
才能 进行 结账 ， 生 成 订单 ， 并 把 货物 及 时 送 达 消 费 者 手中 。 

问题 : 如 果 用 户 没有 进行 登录 ， 并 访问 了 购物 页 ， 这 时 候 系统 该 如 何 处 理 ? 


第 一 节 ”购物 车 模块 设计 


人 确 一 、 购 物 车 的 基本 流程 

(一 ) 添加 商品 到 购物 车 的 基本 流程 

(1) 接收 前 端 传 来 的 商品 信息 ， 如 果 购 物 车 中 不 包含 要 添加 的 商品 信息 ， 直 接 将 商品 
信息 添加 到 购物 车 中 ， 如 果 购 物 车 中 包含 了 要 添加 的 商品 信息 ， 则 更 改 商 品 数量 即 可 。 

(2) 重新 计算 总 计 。 

(二 ) 从 购物 车 中 移 除 商品 的 流程 

将 商品 信息 从 购物 车 中 移 除 ， 重 新 计算 总 计 。 

(三 ) 清 空 购物 车 的 基本 流程 

将 所 有 的 商品 信息 从 购物 车 中 移 除 ， 重 新 计算 总 计 。 


re 


| 国 二 、 购 物 车 模块 设计 


可 以 随便 打开 一 个 购物 页 面 ， 不 难 发 现 ， 购 物 车 包括 的 信息 主要 是 商品 信息 (包括 商 
品名 称 、 图 片 、 价 格 )、 商 品 数量 、 小 计 。 另 外 在 购物 时 ， 需 要 对 其 购物 项 进行 增加 、 删 
除 、 修 改 ， 所 以 首先 需要 封装 一 个 购物 项 类 ， 然 后 通过 调用 这 个 类 ， 完 成 购物 车 的 各 项 
功能 。 
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(一 ) 购 物 车 类 设计 
1. 在 com.qzmall.cart 包 下 新 建 类 Cartltem 
代码 如 下 : 


public class CartItem { 

private Shop shop;// 购 物 项 中 商品 信息 

Private int quantity;// 商 品 数量 

private float subTotal;// 小 计 

public Shop getshop() { 
return shop; } 

public void setShop (Shop shop) { 
this.shop = shop; } 

public int getQuantity() { 
return quantity; } 

public void setQuantity (int quantity) { 
this.quantity = quantity; } 

public float getSubTotal() { 
return quantity*shop.getPrice(); } 

public void setSubTotal (float subTotal) { 
this .subTotal = subTotal;} 


2. 在 com.qzmall.cart 包 下 新 建 类 Cart 
代码 如 下 : 


public class Cart { 
// 购 物 项 集合 : Map 的 Key 就 是 商品 ID，value 就 是 购物 项 
private Map<Integer,CartItem> map=new 
LinkedHashMap<Integer, CartItem> (); 
// 购 物 总 计 
private float total; 
public void setTotal (float total) { 
this.total = total; } 
public float getTotal() { 
return total; 二 
//cart 对 象 中 有 一 个 cartItems 的 属性 
public Collection<CartItem> getCartItems () { 
return map.values () 7 } 
public boolean addCart (CartItem cartItem) { 
Integer pid = cartItem.getShop () .getPid(); 
// 如 果 存 在 该 商品 
IShopService shopService = new ShopServiceImpl (); 
Shop shop = new Shop(); 
shop = shopService.getSshopByid(pid); 
if (map.containsKey(pid)) { 
CartItem cartiItem = map.get (pid); 
if ( cartiItem.getQuantity() + cartItem.getQuantity() <= 
shop.getstock()) { 


第 志 
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cartiItem.setQuantity( cartiItem.getQuantity() + 
cartItem.getQuantity()); 
total += cartItem.getSubTotal (); 
return true; 
} else { 
return false; 
: 


} 
// 如 果 不 存在 该 商品 
else { 
if (cartIitem.getQuantity() <= shop.getstock()) { 
map.put (pid, cartItem); 
total += cartIitem.getsubTotal (); 
return true; 
} else { 
return false; 


} 


} 
// 从 购物 车 清除 购物 项 
public boolean remocart (Integer pid){ 
// 将 购物 项 移出 购物 车 
CartItem cartItem=map .remove (pid); 
// 减 掉 已 移 除 购物 项 的 小 计 
total-=cartItem.getSubTotal (); 
return true; } 
public boolean updatecart (int pid, int quantity){ 
IShopService shopService = new ShopServiceImpl (); 
Shop shop = new Shop(); 
shop = shopService.getShopByid (pid); 
// 如 果 存 在 该 商品 
if (map.containsKey (pid)){ 
if(quantity<=shop.getstock()){ 
CartItem cartiItem=map.get (pid); 
Float ss= cartiItem.getSubTotal (); 
cartiItem.setQuantity (quantity); 
total=total+ cartiItem.getSubTotal ()-ss; 
return true;} 
elset 
return false; 
} 


} 
// 如 果 不 存在 该 商品 
elsef 
return falses 
} 
} 

// 清 空 购物 车 

public boolean clearCart(){ 
map.clear (); 
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total=0; 
return true; 


. 


【代码 说 明 】 

首先 ， 用 map 集合 对 购物 项 CartItem 进行 了 封装 ， 这 样 ， 增 加 、 删 除 购物 项 比较 
方便 。 

其 次 ， 页 面 只 需要 一 个 购物 项 的 集合 ， 所 以 没有 必要 对 map 集合 的 所 有 项 都 生成 
set、get 方法 ， 那 样 遍历 比较 烦琐 。 只 需要 把 map 的 value 转 成 一 个 单列 的 集合 就 可 以 
了 ， 所 以 用 方法 public Collection<CartItem> getCartItems() {return map.values(); } 就 可 以 把 购 
物 项 全 部 商品 遍历 出 来 了 。 

最 后 ， 要 求购 物 数量 必须 小 于 或 等 于 该 商品 库存 数量 ， 所 以 购物 数量 小 于 或 等 于 该 商 
品 库存 数量 时 ， 返 回 真 ， 否 则 返回 假 。 


小 提示 : 如 何 测 试 类 方法 

写 好 了 一 个 类 方法 之 后 ， 这 个 方法 到 底 有 没有 和 错误， 一般 不 能 等 到 网 站 运行 的 时 候 才 
进行 检验 ， 在 IDEA 中， 通常 就 在 com.qzmall.test.DBUtilTest 中 进行 测试 。 

下 面 测试 一 下 上 述 购 物 车 类 中 的 addCart0 方 法 : 


public class DBUtilTest { 
public static void main(String[] args) { 

CartItem CartItem=new CartItem(); 
cartItem.setQuantity (2); 
Shop shop=new Shop(); 
shop.setPid(17); 
shop .setShopname ("飞利浦 电视 "); 
shop.setPrice (29999f); 
cartItem.setShop (shop); 
Cart cart=new Cart(); 
System.out .println(cart.addCart (cartItem) );} 


} 

shop 表 里 设 定 飞利浦 电视 库存 数量 为 5， 购 物 数量 为 2 时 ， 返 回 true， 购 物 数 量 为 6 
时 ， 返 回 假 ， 这 说 明 addCart 运行 成 功 。 

(二 ) 购 物 车 模块 控制 层 设计 

1. 在 com.qzmall.servlet.orders 包 下 添加 servlet:CartServlet 

代码 如 下 : 


@WebServlet (name = "CartSservlet",urlPatterns = "/cartSservlet .do") 
public class CartServlet extends HttpServlet { 

private int pid; 

private int quantity; 

private String action; // 表 示 购 物 车 的 动作 ，add，show，delete 
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// 商 品 业务 逻辑 类 的 对 象 
IShopService shopService = new ShopServiceImpl (); 
public void doPost (HttpServletRequest request, HttpServletResponse 
response) throws ServletException, IOException { 
doGet (request, response); 
public void doGet (HttpServletRequest request, HttpServletResponse 
response) throws ServletException, IOException { 
//System.out .println(" 进 入 CartServlet") :7 
PrintWriter out = response.getWriter(); 
String action=request .getParameter ("action"); 
if (action != null) { 
if (action.equals ("add")) // 如 果 是 添加 商品 
{ 
if (addToCart (request, response)) 
{ request.getRequestDispatcher("/cart.jsp") .forward (request, response); 
} else { 
String msg = "添加 购物 车 失败 ! "; 
request.setAttribute ("msg", msg); 
request .getRequestDispatcher ("/result.jsp") .forward (request, response); 
} 
} 
} 
if (action.equals ("delete")) // 如 果 是 执行 删除 
{ 
if (deleteFromCart (request, response)) 
{ request.getRequestDispatcher ("/cart.jsp") .forward (request, response); 
} else { 
String result = "删除 购物 项 失败 ! "; 
request.setAttribute ("msg", result); 
request .getRequestDispatcher ("/result.jsp") .forward (request, response); 
} 
} 
if (action.equals ("clear")) // 如 果 是 执行 清空 
{ 
Cart cart = (Cart) 
request .getSession () .getAttribute ("cart"); 
if (cart.clearCart()) 
{ request.getRequestDispatcher("/cart.jsp") .forward (request, response); 
} else { 
String result = "清空 购物 车 失败 ! "; 
request.setAttribute ("msg", result); 
request .getRequestDispatcher("/reault.jsp") .forward (request, response); 
} 
} 
if (action.equals ("update")) // 如 果 是 执行 删除 购物 车 中 的 商品 
{ 
if (request.getSession() .getAttribute("cart") == null) { 
Cart cart = new Cart(); 
request .getsession() .setAttribute ("cart", cart); 
} 
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Cart cart = (Cart) request.getSession() .getAttribute("cart"); 
int pid = Integer.parseInt (request .getParameter ("pid")); 
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int quantity = Integer.parseInt (request.getParameter ("quantity")); 


Shop shop = shopService.getShopByid (pid); 
if (quantity <=shop.getstock()) { 
CartItem CartItem = new CartItem(); 
// 设 置 数 量 
cartItem.setQuantity (quantity); 
// 设 置 商 品 
cartItem.setSshop (shop); 
if (cart.updatecart (pid,quantity)) { 
StringBuilder sb = new StringBuilder("{"); 
sb.append("\"quantity\"") .append(":") .append (cartItem.getQuantity()); 
sb.append(","); 
sb.append("\"subtotal\"") .append(":") .append (cartItem.getSubTotal ()); 
sb.append("}"); 
response.getWriter() .print (sb); 
} 
} else { 
String result = "购物 车 商品 数量 更 新 失败 ! "; 
request .setRttribute ("msg", result); 
request .getRequestDispatcher ("/reault.jsp") .forward (request, response); 
} 


} 


, 
// 添 加 商品 到 购物 车 的 方法 
private boolean addToCart (HttpServletRequest request, 
HttpServletResponse response) { 
// 是 否 是 第 一 次 给 购物 车 添加 商品 ， 需 要 给 session 中 创建 一 个 新 的 购物 车 对 象 
if (request.getSession() .getRAttribute ("cart") == null) { 

Cart cart = new Cart(); 
request .getSession () .setAttribute ("cart", cart); 

} 

Cart cart = (Cart) request.getSession() .getAttribute ("cart"); 

String pid = request.getParameter ("pid"); 

String quantity = request.getParameter ("quantity"); 

Shop shop = shopService.getshopByid(Integer.parseInt (pid)); 

CartItem cartItem = new CartIitem(); 

// 设 置 数量 

cartItem.setQuantity (Integer.parseInt (quantity)); 
// 设 置 商 品 
cartItem.setShop (shop); 
if (cart.addCcart (cartItem)) { 

return true; 

} else { 
return falses 

1 


} 
// 从 购物 车 中 删除 商品 
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private boolean deleteFromCart (HttpServletRequest request, 


HttpServletResponse response) 
{ 


int pid =Integer.parseInt( request.getParameter ("pid")); 
Cart cart = (Cart) request .getSession() .getAttribute ("cart"); 


if(cart.remocart (pid)) 
{ 
return true; 


} 
else 


{ 
return false; 


} 
【代码 说 明 】 


购物 车 操作 包括 四 种 动作 ， 分 别 是 添加 购物 项 (add)、 删 除 购物 项 (delete)、 更 新 商品 数 


传递 一 个 action 参数 来 分 别 表示 四 种 动作 ， 这 


样 就 可 以 在 一 个 CartServlet 类 中 完成 上 述 四 种 操作 。 
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2. 在 web.xml 中 配置 CartServlet 
代码 如 下 : 


<!-- 限制 非 登 录用 户 进入 cart .jsp--> 


<filter-mapping> 


<filter-name>validatelogn</filter-name> 
<url-pattern>/cart.jsp</url-pattern> 


</filter-mapping> 


<!-- 限制 非 登 录用 户 使 用 cartservlet .do--> 


<filter-mapping> 


<filter-name>validatelogn</filter-name> 
<url-pattern>/cartServlet .do</url-pattern> 


</filter-mapping> 

(三 ) 视 图 层 设 计 

1. 在 cartjsp 页 面 显示 购物 信息 
代码 如 下 : 


%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ page contentType="text/html;charset=UTF-8" language="java" %> 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 


<meta http-equiv="X-UA-Compatible" content="ie=edge"> 


<title> 购 物 车 </title> 


<link type="text/css" rel="stylesheet" href="css/font-awesome.css"> 


<link type= 


"text/css" rel="stylesheet" href="css/reset.css"> 
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<link type="text/css" rel="stylesheet" href="css/cart.css"> 
<script 
src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 
<script src="js/cart.js"></script> 
</head> 
<body> 
<jsp:include page="head.jsp"/> 
<div class="page-wrap w"> 
<table id="cartTable"> 
<thead> 
<tr> 
<th> 商 品 </th> <th> 单 价 </th> 
<th> 数 量 </th> <th> 小 计 </th> <th> 操 作 </th> 
</tr> 
</thead> 
<tbody> 
<c:forEach items="${sessionScope.cart.cartItems}" var="cartItem"> 
<tr> 
<td class="goods"><img src="<c:url 
value='img/pic/$ {cartItem.shop.imagel}'/>"><span>$ {cartItem.shop.shopna 
me}</span></td> 
<td class="price">$ {cartItem.shop.price}</td> 
<td class="count"> 
<input id="${cartItem.shop.pid}stock" 
value="$ {cartItem.shop.stock}" type="hidden"/> 
<a class="jian" id="${cartItem.shop.pid}jian">-</a><input 
id="${cartItem.shop.pid}Quantity" type="text" 
value="${cartItem.quantity}" readonly="true"/><a class="jia" 
id="${cartItem.shop.pid}jia">+</a> 
</td> 
<td class="subtotal" id="${cartItem.shop.pid}"><span 
id="${cartItem.shop.pid}Subtotal">$ {cartItem.subTotal}</span></td> 
<td class="operation"><span class="delete"><a 
href="cartServlet .do?pid=$ {cartItem.shop.pid}&action=delete"> 删 除 </a> 
</span></td> 
</tr> 
</c:forEach> 
</tbody> 
</table> 
<div class="foot" id="foot"> 
<a class="btn " id="deleteAll" href="cartServlet.do?action=clear"> 
清空 购物 车 </a> 
<input class="btn" type="button" value=" 返 回 继续 购物 " 
onClick="javascript:window.close()"> 
<div class="fr "><a class="btn jiesuan" id="jiesuan" 
href="orderServlet .do"> 生 成 订单 </a></div> 
<div class="fr total"> 合 计 : ¥<span 
id="total">${sessionscope.cart.total}</span></div> 
</div> 
</div> 
<jsp:include page="foot.jsp"/> 
</body> 
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</html> 


【代码 说 明 】 

页 面 利用 JSTL 标签 对 CartServlet 传 来 的 session 集合 对 象 cart 进行 解析 。Cart 对 象 包 
括 两 个 部 分 : 购物 项 (cartItem) 和 购物 总 额 (total)。 购 物 项 内 容 包 括 商 品 实体 对 象 shop 和 商 
品 数量 (quantity)、 商 品 小 计 (subTotal)， 和 弄 清 了 这 几 个 层次 关系 ， 对 cart 对 象 进行 遍历 就 一 
清二 楚 了 。 

2. cartjsp 代码 设计 

代码 如 下 : 


$(function () { 
function showTotal() { 
var total = 0; 
/* 
1. 获取 所 有 的 被 勾 选 的 条 目 复 选 框 ! 对 它们 进行 循环 遍历 
直 
$(".subtotal") .each (function(){ 
Var id=$ (this) .attr ("id"); 
Var text = $("#" + id + "Subtotal") .text(); 
//2. 累加 计算 
total += Number (text); 
}) 
// 3. 把 总 计 显示 在 总 计 元 素 上 
$("#total") .text (total); } 
ShowTotal (); 
$(".jian") .click (function(){ 
var dd= $ (this) .attr ("id") .indexOf ("jian") 
Var pid=$ (this) .attr ("id") .substring(0,dd); 
var quantity=$ ("#"+pid+"Quantity") .val (); 
alert (quantity); 
if (quantity==1){ 
alert ("采购 数量 不 能 低 于 1") 
return false; 
} 
elsef{ 
sendUpdateQuantity (pid, Number (quantity)-1); 


EER 
Siian .click(tfonction(yt 
Var dd= $ (this) .attr ("id") .indexof ("jia") 
Var pid=$ (this) .attr ("id") .substring(0,dd) 
Var quantity=$ ("#"+pid+"Quantity") .val (); 
Var stock=$ ("#"+pid+"Stock") .val () 
if (Number (quantity)>Number (stock)—1)1{ 
alert ("采购 数量 大 于 库存 ! ") 


return false; 
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sendUpdateQuantity (pid, Number (quantity)+1) 


DD); 


function sendUpdateQuantity(pid, quantity) { 
$.ajax({ 


url : "cartservlet.do", 
Evype “POST™S 
data : { 
"action" :"update", 
splde = Pids 
"quantity":quantity, 
"time" : new Date () .getTime () 
}, 
dataType : "json", 
success:function(result) { 
//1. 修改 数量 
$("#" + pid + "Quantity") .val(result.quantity) 7 
//2. 修改 小 计 
$("#" + pid + "Subtotal") .text (result.subtotal); 
//3. 重新 计算 总 计 
showTotal (); 


【代码 说 明 】 
在 “数量 ”这 一 栏 ， 在 数量 字段 旁边 加 了 两 个 按钮 ， 目 的 是 通过 单 击 这 两 个 按钮 进行 


第 七 


数量 修改 。 另 外 ， 还 要 沪 


E 意 修改 商品 数量 后 ， 需 要 重新 计算 小 计 和 总 计 ， 页 T 


不 需要 刷 


新 ， 所 以 这 样 采用 ajax0 方 法 ， 通 过 sendUpdateQuantity0 函 数 调 用 cartServlet.do， 通 过 往 
其 传递 了 三 个 参数 : pid、action、quantity， 这 样 就 可 以 把 修改 后 的 小 计 和 总 计 无 刷新 地 传 
回 界面 。 运 行 效果 如 图 7-1 所 示 。 
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7-1 购物 车 页 面 (cartjsp) 
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课堂 技能 训练 : 

【 实 训 操作 内 容 】 完 成 购物 车 类 设计 。 

【 实 训 操作 要 求 】 要 求购 物 类 具有 以 下 功能 。 
(1) 增加 商品 到 购物 车 功能 。 

(2) 删除 商品 功能 。 

(3) 清空 购物 车 功能 。 

(4) 异步 请 求 更 新 购物 车 功能 。 


【知识 拓展 】 


实现 购物 车 的 方法 有 很 多 ， 本 例 中 我 们 主要 是 通过 session 对 象 实现 了 购物 车 的 各 项 功 
能 ， 也 可 以 采用 其 他 方式 ， 这 些 方式 各 有 优 劣 ， 介 绍 如 下 。 

(1) cookie。 

cookie 存储 在 客户 端 ， 且 占用 很 少 的 资源 ， 浏 览 器 允许 存放 300 个 cookie， 每 个 
cookie 的 大 小 为 4KB， 足 以 满足 购物 车 的 要 求 ， 同 时 也 减轻 了 服务 器 的 负荷 。 

cookie 为 浏览 器 所 内 置 ， 使 用 方便 。 即 使 用 户 不 小 心 关 闭 了 浏览 器 窗口 ， 只 要 在 
cookie 定义 的 有 效 期 内 ， 购 物 车 中 的 信息 也 不 会 丢失 。 

基于 cookie 的 购物 车 要 求 用 户 浏览 器 必须 支持 并 设置 为 启用 cookie， 否 则 购物 车 则 失 
效 ; 存在 着 关于 cookie 侵犯 访问 者 隐私 权 的 争论 ， 因 此 有 些 用 户 会 禁止 本 机 的 cookie 
功能 。 

(2) session, 

session 是 实现 购物 车 的 另 一 种 方法 。 它 与 cookie 最 重大 的 区 别 是 ，session 将 用 户 在 
会 话 期 间 的 私有 信息 存储 在 服务 器 端 ， 提 高 了 安全 性 。 在 服务 器 生成 Session 后 ， 客 户 端 会 
生成 一 个 sessionid 识别 号 保存 在 客户 端 ， 以 保持 和 服务 器 的 同步 。 这 个 sessionid 是 只 读 
的 ， 如 果 客 户 端 禁止 cookie 功能 ，session 会 通过 在 URL 中 附加 参数 ， 或 隐 含 在 表单 中 提 
交 等 其 他 方式 在 页 面 间 传送 。 因 此 ， 利 用 session 实施 对 用 户 的 管理 更 为 安全 、 有 效 。 
session 会 占用 服务 器 资源 ， 加 大 服务 器 端的 负载 ， 尤 其 当 并 发 用 户 很 多 时 ， 会 生成 大 量 的 
session， 影 响 服务 器 的 性 能 。 

(3) 结合 数据 库 的 方式 。 

数据 库 承 担 着 存储 购物 信息 的 作用 ，session 或 cookie 则 用 来 跟踪 用 户 。 数 据 库 与 
cookie 分 别 负责 记录 数据 和 维持 会 话 ， 能 发 挥 各 自 的 优势 ， 使 安全 性 和 服务 器 性 能 都 得 到 
提高 。 
每 一 个 购物 的 行为 ， 都 要 直接 建立 与 数据 库 的 连接 ， 直 至 对 表 的 操作 完成 后 ， 连 接 才 
释放 。 当 并 发 用 户 很 多 时 ， 会 影响 数据 库 的 性 能 ， 因 此 ， 这 对 数据 库 的 性 能 提出 了 更 高 的 
要 求 。 
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第 二 节 ”生成 订单 子 模块 设计 


| 国 一 、 生 成 订单 模块 的 基本 流程 


(一 ) 生 成 主 订单 信息 的 流程 

(1) 得 到 用 户 提交 的 信息 ( 收 货 人 、 收 货 地 址 、 邮 编 、 手 机 号 ) 和 订单 总 额 。 
(2) 生成 订单 编号 (保证 订单 编号 不 会 重复 )。 

(3) 设 定 订 单 初始 状态 为 1。 

(4) 生成 订单 主 表 。 

(5) 扣除 会 员 积 分 。 


(二 ) 生 成 订单 明细 的 流程 


(1) 得 到 用 户 购买 的 商品 信息 (商品 编号 、 商 品名 称 、 商 品 数量 )。 
(2) 把 每 一 商品 信息 和 订单 编号 一 并 加 入 订单 明细 表 。 


中 二 、 生 成 订单 子 模块 功能 实现 


(一 ) 生 成 订单 子 模块 持久 层 设计 
1. 接口 类 设计 
在 com.qzmall.dao 包 下 新 建 接口 类 IOrdersDao: 


public interface IOrdersDao { 
// 生 成 新 的 订单 
Public boolean adqorders (Orders orders); 
// 生 成 订单 明细 
public boolean addordersItem(OrdersItem ordersItem); 
} 


2. 接口 实现 类 设计 
在 com.qzmall.dao.impl 包 下 新 建 接口 实现 类 OrderDaoImpl: 


public class OrderDaoImpl implements IOrdersDao { 
/* 


(1) 生成 新 的 订单 。 


第 七 章 


该 方法 用 来 实现 向 订单 主 表 orders 添加 一 条 记录 ， 以 订单 对 象 为 参数 ， 返 回 结果 为 布 


尔 类 型 ， 表 示 生 成 新 的 订单 是 否 成 功 。 具 体 代码 如 下 : 


i 
@Override 
public boolean addorders (Orders orders) { 
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String strSql = "insert into orders 
(orderId, username,address,postcode, truename,addtime, phone, sum, state) 
Values (oh orn 
return DBUtil .executeUpdate (strsql, orders.getorderId(), 
orders.getUsername(), orders.getAddress(), orders.getPostcode(), 
orders.getTruename () orders.getAddtime(), orders.getPhone(), 
orders.getsum(), orders.getstate()) > 0;} 


/* 

(2) 生成 新 的 订单 明细 。 

该 方法 用 来 实现 向 订单 明细 表 ordersitem 添加 一 条 记录 ， 以 订单 明细 对 象 (ordersItem) 
为 参数 ， 返 回 结果 为 布尔 类 型 ， 表 示 生 成 新 的 订单 是 否 成 功 。 具 体 代码 如 下 : 


eh 
@Override 
public boolean addordersItem(OrdersItem ordersItem) { 
String strSsql = "insert into ordersitem 


(orderId,pid, shopname, price, shopnum) values (2?,2,2,23,2) "7 

return DBUtil.executeUpdate (strSsql, ordersItem.getorderId(), 
ordersItem.getPid(), ordersItem.getShopname(), ordersItem.getPrice(), 
ordersItem.getShopnum()) > 0; 


} 
} 


(二 ) 生 成 订单 子 模块 逻辑 层 设计 

1. 接口 类 设计 

接口 类 中 的 方法 与 持久 层 一 样 ， 这 里 不 再 资 述 。 
2. 接口 实现 类 设计 

代码 如 下 : 

二/ 


public class OrdersServiceImpl implements IOrdersService { 


Q@Override 
public boolean addorders (Orders orders) { 
IOrdersDao ordersDao=new OrderDaoImpl (); 
return ordersDao .addorders (orders); 
} 
Q@Override 
public boolean addordersItem(OrdersItem ordersItem) { 


IOrdersDao ordersDao=new OrderDaoImp1 (); 
return ordersDao .addordersItem (ordersItem) ; 


} 

(三 ) 生 成 订单 子 模块 控制 层 设 计 

1. 跳 转 到 生成 订单 页 面 (orderjsp) 

当 登 录用 户 从 cartjsp 页 发 出 生成 商品 的 请 求 时 ， 系 统 就 会 交 给 OrderServlet 来 处 理 ， 
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该 类 通过 调用 业务 逻辑 类 userService.getUserByUser 方法 得 到 用 户 对 象 user， 然 后 把 它 传 
给 订单 页 面 。 具 体 代 码 如 下 : 


理 。 


QWebServlet (name = "OrderServlet",urlPatterns = "/orderServlet.do") 
public class OrderServlet extends HttpServlet { 
protected void doGet (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { HttpSession 
session=req.getSession (); 
User userl= (User) session.getAttribute ("user"); 
IUserService userService=new UserServiceImpl (); 
User user=userService.getUserByUser (userl .getUsername () ) ; 
req.setAttribute ("user",user); 
req.getRequestDispatcher ("order.jsp") .forward (req, resp); 
+ 
和 


2. 订单 结算 功能 设计 


当 登 录用 户 从 orderjsp 页 发 出 订单 结算 的 请 求 时 ， 
具体 代码 如 下 : 


QWebServlet (name = "CheckoutServlet",urlPatterns = "/checkout .do") 
public class CheckOutServlet extends HttpServlet { 
protected void doPost (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { HttpSession session = 
req.getSession(); 

int jf=0; 

IUserService userService=new UserServiceImpl (); 

IOrdersService ordersService=new OrdersServiceImpl (); 

User user= (User) session.getAttribute ("user"); 

Cart cart=(Cart)session.getAttribute ("cart"); 

Orders orders=new Orders(); 

OrdersItem ordersItem=new OrdersItem(); 

float sum=cart.getTotal (); 

long adddate =StringHelper.getCurrentTimeStamp (); 

Random rand =new Random(); 

int i=rand.nextInt (1000); 

adddate=adddate*1000+i; 

String orderId=String.valueof (adddate); 

String address=req.getParameter ("address"); 

String phone=req.getParameter ("phone"); 

String postcode=req.getParameter ("postcode"); 

String truename=req.getParameter ("truename"); 


会 交 给 CheckOutServlet 来 处 


String username=user.getUsername (); 
int point=Integer.parseInt (req.getParameter ("point")); 
String Isjifen=req.getParameter ("Isjifen"); 
if (Isjifen!=null && !"" -equals (Isjifen)) { 
int jifenl = Integer-parseInt (req.getParameter ("jf1")); 
System.out.println ("jifenl="+jifenl1); 
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if (jifenl <= point) { 
TE renn /ooo 
sum = sum - jf; 
req.setAttribute ("sum", sum); 
String sql = "兑换 积分 "; 
Point pointl=new Point(); 
Point1.setUsername (username); 
pointl.setPointtime (StringHelper.getCurrentFormatDate ()); 
pointl.setOorderid (orderId); 
pointl.setMypoint (-jf*1000); 
pointl.setDescription(sql); 
userService.addPoint (point1); 

» 

elsef{ 
return; 


} 
orders.setOrderId (orderId); 
orders.setUsername (username); 
orders.setAddress (address); 
orders.setPhone (phone); 
orders.setAddtime (StringHelper.getCurrentFormatDate()); 
orders.setTruename (truename); 
orders.setPostcode (postcode); 
orders.setSsum(sum); 
orders.setstate (1);//1. 未 付款 2. 已 付款 ， 未 发 货 3. 已 发 货 4 .交易 完 成 
if (ordersService.addorders (orders)){ 
for (CartItem cartIitem:cart.getCartItems()){ 
ordersItem.setshopnum(cartItem.getQuantity()); 
ordersItem.setPrice (cartItem.getShop () .getPrice()); 
ordersItem.setShopname (cartItem.getShop () .getShopname () ) 
ordersItem.setPid(cartItem.getShop() .getPid()); 
ordersItem.setOrderId (orderId); 
System.out .println (ordersService.addordersItem(ordersItem) ) ; 
1 
req.setAttribute ("orderId", orderId); 
String msg=""; 
if (Isjifen!=null) 
{ msg=" 你 的 订单 编号 为 :' "+orderId+"'， 金 额 为 "+cart .getTotal ()+" 元 ， 
扣除 会 员 积 分 "+jEx*1000+"， 应 付 "+sum+" 元 "7 
} 
elsel 
msg=" 你 的 订单 编号 为 : '"+orderId+"'， 人 金额 为 "+cart .getTotal ()+" 元 ， 
应 付 "+sum+" 元 "; 
E 
session.removeAttribute ("cart"); 
req.setAttribute ("msg",msg); 
req.getRequestDispatcher ("checkout .jsp") .forward (req, resp); 
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1 
else 
msg=" 发 生 异 常 ， 订 单 没 有 完成 "; 
req.setAttribute ("msg",msg); 
req.getRequestDispatcher ("result.jsp") .forward (req, resp); 
} 

protected void doGet (HttpServletRequest req, HttpServletResponse resp) 

throws ServletException, IOException { doPost (req,resp);} 

【代码 说 明 】 

订单 结算 其 实 就 是 往 订单 主 表 和 订单 明细 表 中 添加 记录 。 

(1) 我 们 要 从 ordersjsp 页 面 通过 req 对 象 得 到 如 收 货 地 址 (address)、 真 实 姓 名 
(truename)、 手 机 号 码 (phone)、 邮 编 (postcode)、 总 计 (sum)、 用 户 积分 (point) 这 些 信 息 。 

(2) 保证 订单 主 表 (orders) 的 订单 编号 (orderId) 不 会 重复 。 

由 于 订单 在 订单 主 表 中 是 不 能 重复 的 ， 所 以 采用 生成 订单 的 实时 时 间 和 随机 数 生 成 订 
单 编号 ， 调 用 StringHelper.getCurrentTimeStamp() 方 法 生成 时 间 的 长 整 型 ， 又 通过 int 
i=rand.nextInt(1000) 得 到 一 个 三 位 数 的 随机 数 ， 然 后 把 这 两 个 数 合并 到 一 块 儿 ， 就 可 以 保证 
订单 编号 不 会 重复 。 

(3) 订单 状态 是 初始 状态 ， 设 为 1; 订单 生成 时 间 是 系统 默认 时 间 。 

(4) 如 果 会 员 使 用 会 员 积 分 ， 系 统 规定 1000 个 积分 折合 1 元 钱 ， 使 用 会 员 积 分 必须 
是 1000 的 整数 位 ， 结 算 订单 总 额 时 要 扣除 会 员 积 分 相抵 的 金额 ， 同 时 要 在 积分 表 中 添加 
积分 使 用 信息 。 

(5) 把 订单 编号 、 收 货 地 址 、 真 实 姓名 、 订 单 金额 、 订 单 状 态 等 信息 封装 到 订单 主 表 
实体 对 象 order 中 ， 把 会 员 积分 信息 封装 到 pointl 对 象 中 ， 利 用 订单 业务 逻辑 类 生成 主 订 
单 信息 ， 利 用 积分 业务 逻辑 类 生成 用 户 积分 记录 ， 在 生成 订单 主 表 信 息 的 同时 ， 还 要 把 这 
一 订单 编号 下 的 商品 、 数 量 、 价 格 等 信息 逐一 封装 到 订单 明细 表 实 体 对 象 中 ， 然 后 调用 订 
单 业务 逻辑 类 生成 订单 明细 信息 。 

小 提示 : Java Servlet API 中 forward() 与 redirect() 的 区 别 

前 者 仅 是 容器 中 控制 权 的 转向 ， 在 客户 端 浏览 器 地 址 栏 中 不 会 显示 出 转向 后 的 地 址 ; 
后 者 则 是 完全 的 跳 转 ， 浏 览 器 将 会 得 到 跳 转 的 地 址 ， 并 重新 发 送 链接 请 求 。 这 样 ， 从 浏览 
器 的 地 址 栏 中 可 以 看 到 跳 转 后 的 链接 地 址 。 因 此 ， 前 者 更 加 高 效 ， 在 前 者 可 以 满足 需要 
时 ， 尽 量 使 用 forward() 方 法 ， 并 且 ， 这 样 也 有 助 于 隐藏 实际 的 链接 。 在 有 些 情况 下 ， 比 
如 ， 需 要 跳 转 到 一 个 其 他 服务 器 上 的 资源 ， 则 必须 使 用 sendRedirect(0 方 法 。 

(四 ) 生 成 订单 子 模块 视图 层 设计 

1. 生成 订单 (orderjsp) 页 面 设计 

代码 如 下 : 
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<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title> 我 的 订单 </title> 
<link type="text/css" rel="stylesheet" href="css/font-awesome.css"> 
<link type="text/css" rel="stylesheet" href="css/reset.css"> 
<link type="text/css" rel="stylesheet" href="css/order.css"> 
<script 
src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 
<script type="text/javascript" src="js/order.js"></script> 
</head> 
<body> 
<jsp:include page="head.jsp"/> 
<div class="page-wrap Ww"> 
<form id="forml" name="forml" action="checkOut.do" onsubmit="return 
sendreg () 7"> 
<div class="panel"> 
<hl class="panel-title"> 收 货 地 址 </h1> 
<div class="panel-body"> 
<div class="form-line"> 
<span class="label"> 实 ”名 : </span> 
<span class="text"><input type="text" id="truename" 
name="truename" value="$ {user.truename}"></span> 
<span clas label"> 手 机 : </span> 
<span class="text"><input type="text" id="phone" 
name="phone" value="$ {user.phone}"></span> 
</div> 
<div class="form-line"> 
<span class="label"> 地 址 : </span> 
<span class="text"><input type="text" id="address" 
name="address" value="$ {user.address}" class="address"></span> 
</div> 
<div class="form-line"> 
<span class="label"> 积 ”分 : </span> 
<span class="text"><input type="text" id="point" 
name="point" value="$ {user.point}" readonly="true"></span> 
<span class="label"> 邮 编 : </span> 
<span class="text"><input type="text" id="postcode" 
name="postcode" value="$ {user.postcode}"></span> 
</div> 
</div> 
<hl class="panel-title"> 商 品 清单 </h1> 
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<div class="panel-body"> 
<table class="product-table"> 
E> 
<th class="cel1-img"> 商 品 图 片 </th> 
<th class="cell-info"> 商 品名 称 </th> 
<th class="cell-price"> 价 格 </th> 
<th class="cell-count"> 数 量 </th> 
<th class="cell-total"> 小 计 </th> 
</tr> 
<c:forEach items="${sessionScope.cart.cartItems}" var="cartItem"> 
<tr> 
<td class="cell-img"><a href=""><img src="<c:url 
Value="'img/pic/${cartItem.shop.imagel}'/>" class="p-img"/></a></td> 
<td class="cell-info"><a 
href="">${cartItem. shop.shopname}</a></td> 
<td class="cell-price">¥$ {cartItem.shop.price}</td> 
<td class="cell-count">${cartItem.quantity}</td> 
<td class="cell-total">$ {cartItem.subTotal}</td> 
</tr> 
</c:forEach> 
</table> 
<dl class="jifen"> 
<dt><input name="Isjifen" type="checkbox" id="Isjifen" 
onclick="javascript:ChkIsjifen();"” value="1" /> 兑换 积分 </dt> 
<dd id="Isjifenl" style="display:none;"><input name="]jfl" 
type="text" id="jfl" onblur="javascript:return test();"/> 填 写 不 能 超过 本 人 积 
分 ， 且 必须 是 1000 的 倍数 </dd> 
</dl> 
<div class="submit-con"> 
<span> 订 单 总 价 : </span> 
<span class="submit-total">${sessionscope.cart.total} </span> 
<span class="btn order-submit"><input type="submit" value=" 提 交 
订单 "/></span> 
</div> 
</div> 
</div> 
</form> 
</div> 
<jsp:include page="foot.jsp"/> 
</html> 


【代码 解析 】 

该 页 面 是 根据 购物 车 里 的 商品 生成 订单 内 容 ， 这 个 页 面包 括 以 下 三 个 方面 的 内 容 。 

(1) 订单 基本 信息 。 利 用 EL 标签 解析 OrderServlet 传 回 的 user 对 象 生成 这 部 分 内 容 。 
(2) 订单 明细 信息 。 利 用 JSTL 标签 对 session 对 象 cart 遍历 生成 其 内 容 。 

(3) 兑换 积分 信息 。 这 个 可 以 由 用 户 自己 来 进行 选择 ， 积 分 填写 时 不 能 超过 本 人 积 
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分 ， 且 必须 是 1000 的 倍数 。 运 行 效果 如 图 7-2 所 示 。 


QA Eee 
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7-2 生成 订单 (orderjsp) 页 面 


2. 提交 订单 (checkout.jsp) 页 面 设计 
代码 如 下 : 


<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title> 秦 职 电 商 平台 </title> 


<link type="text/css" rel="stylesheet" href="css/font-awesome.css"> 


<link type="text/css" rel="stylesheet" href="css/reset.css"> 
<link type="text/css" rel="stylesheet" href="css/result.css"> 
</head> 
<body> 
<jsp:include page="head.jsp"/> 
<div class="page-wrap w"> 
<div class="result-con"> 
<hl class="result-title">$ {msg}</h1l> 
<div class="result-content"> 
<a href="index.do" class="1ink"> 回 到 首页 </a> 
</div> 
</div> 
</div> 
<jsp:include page="foot.jsp"/> 
</body> 
</html> 


【代码 说 明 】 


成 其 内 容 ， 主 要 包括 订单 编号 、 订 单 金额 、 会 员 应 付 金额 。 运 行 效果 如 图 7-3 所 示 。 
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你 的 订单 编号 为 ; '1517213230297819' , 金额 为 77795.0 元 ,扣除 会 员 积 分 20000 ,应 付 77775.0 
元 


图 7-3 提交 订单 (checkoutjsp) 页 面 


课堂 技能 训练 : 


【 实 训 操作 内 容 】 完 成 订单 子 模块 的 结算 功能 。 
【 实 训 操作 步骤 】 

(1) 持久 层 设 计 。 

(2) 业务 逻辑 层 设计 。 

(3) 控制 层 设计 。 

(4) 视图 层 设 计 。 


第 三 节 ”我 的 订单 子 模块 设计 
日 一 、 我 的 订单 子 模块 基本 流程 


订单 浏览 基本 流程 : 用 户 登 录 浏 览 我 的 订单 。 
订单 查询 基本 流程 用 户 登录 ; 输入 订单 编号 ; 查询 订单 。 

订单 状态 修改 基本 流程 : 用 户 登录 ; 浏览 我 的 订单 、 订 单 明 细 ; 修改 订单 状态 。 
取消 订单 基本 流程 用 户 登 录 ; 浏览 我 的 订单 ， 选 中 某 一 订单 ， 取 消 订单 。 


二 、 我 的 订单 子 模块 主要 功能 实现 
(一 ) 我 的 订单 子 模块 持久 层 设计 
1. 接口 类 设计 
在 com.qzmall.dao.IOrdersDao 接口 类 下 新 增 以 下 方法 : 


public interface IOrdersDao { 

// 分 页 查询 用 户 订单 信息 

public List<Orders> getOrdersPageByUser (String username, int 
currentPage, int pageSize); 

public int getOrdersTotalByUser (String username); 

// 根据 订单 编号 查询 订单 主 表 详细 信息 

public Orders getOrdersByOrderId (String orderId); 

// 根据 订单 编号 查询 订单 明细 表 详 细 信息 

public List<OrdersItem> getOrdersItemBYOrderId (String orderId) ; 


// 根据 订单 编号 更 新 订单 状态 


和 七 
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public boolean updateOrdersState (Orders orders); 
// 根据 订单 编号 删除 订单 


public boolean deleteOrders (String orderId);} 
2. 接口 实现 类 设计 
代码 如 下 : 


public class OrderDaoImpl implements IOrdersDao { 
Pa 


(1) 显示 我 的 订单 。 
该 方法 用 来 查询 表 orders 分 页 单位 内 商品 记录 功能 ， 以 登录 用 户 名 、 请 求 页 号 和 每 页 
记录 为 参数 ， 返 回 结果 为 商品 集合 List<Orders> 分 页 边界 类 型 。 代 码 如 下 : 


@Override 
public List<Orders> getOrdersPageByUser (String username, int 
currentPage, int pageSize) { 
List<Orders> orders = new ArrayList<Orders>(); 
String strSql = "select * from orders where username=? order by 
state asc limit ?,2"; 
return (List<Orders>) DBUtil.executeQuery(strSsql, new 
IResultSetUtil() { 
QOverride 
public Object doHandler (ResultSet rs) throws SQLException { 
while (rs.next()) { 
Orders ordersl = new Orders(); 
ordersl.setUsername (rs.getString ("username")); 
ordersl.setTruename (rs.getSstring ("truename")); 
ordersl.setOrderId(rs.getstring ("orderId")); 
ordersl.setPhone (rs.getstring ("phone")); 
ordersl.setSum(rs.getFloat ("sum")); 
ordersl .setstate (rs.getInt ("state")); 
ordersl.setAddtime (rs.getstring ("addtime")); 
orders.add (orders1); 
} 
return orders; 
» 
}, username, (currentPage - 1) * pageSize, pageSize); 
} 
/* 


(2) 查询 我 的 订单 数目 。 

该 方法 用 来 查询 表 orders 中 属于 登录 用 户 的 订单 数量 ， 返 回 结果 为 整数 类 型 ， 表 示 记 
录 数 。 代 码 如 下 : 

*/ 


@Override 
public int getOrdersTotalByUser (String username) { 


El 


String strSsql = "select count(*) from orders where username=?2"; 
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Object obj = DBU 
return Integer.p: 
} 
A 


(3) 根据 订单 编号 查询 订单 
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til.executeQuery (strSsql, username); 
arseInt (obj .tostring()); 


主 表 详细 信息 。 


该 方法 用 来 查询 订单 主 表 (orders) 某 一 订单 的 详细 信息 ， 返 回 结果 为 Orders 类 型 ， 表 示 
某 一 订单 实体 对 象 。 具 体 代 码 如 下 : 


和 
QOverride 


public Orders getOrdersByOrderId (String orderId) { 


String strsql = 
Orders orders’ = 


"select * from orders where orderld=2"> 
new Orders () 7 


return (Orders) DBUtil.executeQuery(strSql，new IResultSetUtil() 


{ override 


public Object doHandler (ResultSet rs) throws SQLException { 


E(xtE 


orders 
orders 
orders 


orders. 
orders. 
orders. 
orders. 
orders. 
orders. 


return 
} 


.SetOorderId(rs.getstring ("orderId")); 
.SetUsername (rs.getstring ("username")); 
.SetTruename (rs.getstring ("truename")); 
setPhone (rs.getstring ("phone")); 
setsum(rs.getFloat ("sum")); 

SetState (rs.getInt ("state")); 
setAddtime (rs.getstring ("addtime")); 
setPostcode (rs.getstring ("postcode")); 
setAddress (rs.getstring ("address")); 
orders; 


return null; 


} 
}, orderId); 
} 
/* 


(4) 根据 订单 编号 查询 订单 明细 表 详细 信息 。 
该 方法 用 来 查询 订单 明细 表 (ordersitem) 某 一 订单 编号 的 详细 信息 ， 返 回 
List<OrdersItem> 集 合 类 型 ， 表 示 某 一 订单 实体 对 象 。 有 具体 代码 如 下 : 


人 
@Override 


public List<OrdersItem> getOrdersItemBYOrderId (string orderId) 
List<OrdersItem> ordersItems = new ArrayList<OrdersItem> (); 


String strSql = "select * from ordersitem where orderId=?"; 


return (List<OrdersItem>) DBUtil.executeQuery(strSsql, new 


IResultSetUtil() { 
QQoverride 


{ 


public Object doHandler (ResultSet rs) throws SQLException { 


while (rs 
Orders 


-next ()) { 
Item ordersl = new OrdersItem(); 
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ordersl.setOrderId (rs.getstring ("orderId")); 
ordersl.setPid(rs.getInt ("pid")); 
ordersl.setShopname (rs.getstring ("shopname")); 
ordersl.setshopnum(rs.getIint ("shopnum")); 
ordersl .setPrice(rs.getFloat ("price")); 
ordersItems -add (orders]1); 
} 
return ordersItems; 
} 
}, orderId); 
省 
/* 
(5) 更 新 订单 状态 方法 。 
该 方法 用 来 实现 订单 主 表 (orders) 订 单 状态 的 功能 ， 以 订单 实体 对 象 (orders) 为 参数 ， 返 
回 结果 为 布尔 类 型 ， 表 示 更 新 商品 信息 是 否 成 功 。 代 码 如 下 : 
让 
@Override 
public boolean updateOrdersstate (Orders orders) { 
String strSql = "update orders set state=? where orderId=?"; 
return DBUtil.executeUpdate (strSsql, orders.getstate(), 
orders .getOrqderId()) > 0; 
} 
Ve 大 
(6) 删除 订单 方法 。 
该 方法 用 来 实现 删除 订单 表 (orders) 一 条 记录 的 功能 ， 以 订单 编号 orderld 为 参数 ， 返 
回 结果 为 布尔 类 型 ， 表 示 删 除 商品 信息 是 否 成 功 。 代 码 如 下 : 
二 让 
@Override 
public boolean deleteOrders (String orderId) { 
String strSql = "delete FROM orders where orderId=?"; 
return DBUtil.executeUpdate (strSsql, orderId) > 0; 
} 


(二 ) 我 的 订单 子 模块 逻辑 层 设计 

1. 接口 类 设计 

接口 类 中 的 方法 与 持久 层 一 样 ， 这 里 不 再 效 述 。 
2. 接口 实现 类 设计 

代码 如 下 : 


public class OrdersServiceImpl implements IOrdersService { 
@Override 
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public List<Orders> getOrdersPageByUser (String username, int 
currentPage, int pageSize) { 
IOrdersDao ordersDao=new OrderDaoImp]l (); 
return ordersDao.getOrdersPageByUser (username, currentPage,pageSize); 
} 
@Override 
public int getOrdersTotalByUser (String username) { 
IOrdersDao ordersDao=new OrderDaoImp]l (); 
return ordersDao.getOrdersTotalByUser (username); 
} 
@Override 
public Orders getOrdersByOrderId (String orderId) { 
IOrdersDao ordersDao=new OrderDaoImp]l (); 
return ordersDao.getOrdersByOrderId (orderId); 
} 
Q@Override 
public List<OrdersItem> getOrdersItemByOrderId(String orderId) { 
IOrdersDao ordersDao=new OrderDaoImp]l (); 
return ordersDao .getOrdersItemBYOrderId (orderId) ; 
} 
@Override 
public boolean updateOrdersstate (Orders orders) { 
IOrdersDao ordersDao=new OrderDaoImpl (); 
return ordersDao.updateOrdersstate (orders); 
# 
@Override 
public boolean deleteOrders (String orderId) { 
IOrdersDao ordersDao=new OrderDaoImpl (); 
return ordersDao.deleteOrders (orderId) 
) 


(三 ) 我 的 订单 子 模块 控制 层 设计 
1. 显示 我 的 订单 信息 功能 设计 
当 用 户 登录 成 功 后 ， 进 入 个 人 中 心 ， 在 leftjsp 页 面 单 击 “ 我 的 订单 ”的 链接 时 ， 系 统 


就 会 交 给 OrdersInfoServlet 来 处 理 ， 该 类 通过 调用 业务 逻辑 类 的 方法 getOrdersPageByUser 
来 实现 全 部 商品 分 页 展示 的 功能 。 具 体 代码 如 下 : 


@Webservlet (name = "OrdersInfoSservlet",urlPatterns = "/ordersInfo.do") 
public class OrdersInfoServlet extends HttpServlet { 
protected void doPost (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException {doGet (req, resp);} 
protected void doGet (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 

HttpSession session=req.getSession(); 

if (session.getAttribute("user")!=null){ 

User userl= (User) session.getAttribute ("user"); 

try{ 

int currentPage = Integer-parseInt (req.getParameter ("currentPage")); 

IOrdersService ordersService=new OrdersServiceImpl (); 
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int totalSize = ordersService.getOrdersTotalByUser (userl.getUsername () ) 7 
int totalPage=totalSize/ Tally.SHOP PAGE SIZE; 
if(totalSsize%sTally.SHOP PAGE SIZE!=0) 
totalPaget+; 
if (currentPage < 1) { 
currentPage = 1; 
} 
if (currentPage > totalPage) { 
currentPage = totalPage; 
} 
Pager page = new Pager (currentPage, totalsSize); 
List<Orders> ordersInfo=ordersService.getOrdersPageByUser 
(userl .getUsername (),currentPage,Tally.SHOP PAGE SIZE); 
String Url = req.getRequestURI() + "?" + req.getQuerystring(); 
int index = url.lastIndexOf ("currentPage="); 
if (index != -1) { 
url = url.substring(0, index); 
} 
req.setAttribute ("ordersInfo",ordersInfo); 
req.setAttribute ("page", page); 
req.setAttribute ("url", url); 
req.getRequestDispatcher ("myOrdersInfo.jsp") .forward (req, 
resp);} catch (NumberFormatException ex) { 
string msg=" 页 码 传输 异常 "; 
req.setAttribute ("msg",msg); 
req.getRequestDispatcher ("result.jsp") .forward (req, resp);} 
} 
elsel 
resp.sendRedirect ("login.jsp"); 
} 


} 

2. 显示 我 的 订单 详细 信息 功能 设计 

当 用 户 登 录 成 功 后 ， 进 入 个 人 中 心 ， 在 orders.jsp 页 面 单 击 每 一 个 订单 编号 的 链接 时 ， 
系统 就 会 交 给 OrdersListServlet 来 处 理 ， 该 类 通过 调用 业务 逻辑 类 的 方法 getOrdersItemByOrderId 
生成 订单 主 表 实 体 类 对 象 orders 和 订单 详细 表 实 体 类 对 象 ， 并 传 回 myOrdersListjsp 页 
面 。 代 码 如 下 : 


@WebsServlet (name = "OrdersListSservlet",urlPatterns = "/ordersList.do") 
public class OrdersListServlet extends HttpServlet { 
protected void doPost (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { doGet (req,resp); } 
protected void doGet (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 

String orderId=req.getParameter ("orderId"); 

IOrdersService ordersService=new OrdersServiceImpl (); 

Orders rders=ordersService.getOrdersByOrderId(orderId); 
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List<OrdersItem> 
ordersItemList=ordersService.getOrdersItemByOrderId (orderId); 
req.setAttribute ("orders",orders); 
req.setAttribute ("ordersItemList",ordersItemList); 
req.getRequestDispatcher ("myOrdersList.jsp") .forward (req, resp) 
} 
} 


3. 修改 我 的 订单 状态 功能 设计 
当 用 户 登 录 成 功 后 ， 进 入 个 人 中 心 ， 在 myOrdersListjsp 页 面 当 用 户 发 出 修改 订单 状 


态 的 请 求 后 ， 系 统 就 会 交 给 UpdateOrderStateServlet 来 处 理 。 有 具体 代码 如 下 : 


@WebServlet (name = "UpdateOrderSstatesServlet",urlPatterns = 
"/updateOrderstate.do") 
public class UpdateOrderStateServlet extends HttpServlet { 
protected void doPost (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
HttpSession session = req.getSsession(); 
User userl= (User) session.getAttribute("user"); 
String orderId = req.getParameter ("orderId"); 
String states = req.getParameter ("state"); 
if (states==null ||"".equals(states)){ 
String msg = "订单 状态 未 做 任何 改变 "; 
req.setAttribute ("msg", msg); 
req.getRequestDispatcher ("myresult.jsp") .forward (req, resp); 
} 
int state=Integer.parseInt (states); 
Orders orders = new Orders(); 
orders .setOrderId (orderId) 
Orders .setState (state) 
float sum = Float.parseFloat (req.getParameter ("sum")); 
int mypoint= (int) sum; 
IOrdersService ordersService = new OrdersServiceImpl (); 
if (ordersService.updateOrdersState (orders)) { 
if (state == 2) { 
IUserService userService = new UserServiceImpl (); 
Point point = new Point(); 
point.setUsername (userl .getUsername ()); 
point.setOorderid(orderId); 
point.setPointtime (StringHelper.getCurrentFormatDate()); 
point.setMypoint (mypoint); 
point .setDescription ("购物 赠送 积分 ") ; 
userService.addPoint (point); 
String msg = "修改 订单 状态 成 功 , 并 赠送 积分 ”+ mypoint; 
req.setAttribute ("msg", msg); 
req.getRequestDispatcher ("myresult .jsp") .forward (req, 
FesSp)r 
else{ String msg = "修改 订单 状态 成 功 !"; 
req.setAttribute ("msg", msg); 
req.getRequestDispatcher ("myresult .jsp") .forward (req, resp); 
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} ? 

else{ String msg=" 修 改 订单 状态 未 成 功 "; 

req.setAttribute ("msg",msg); 
req.getRequestDispatcher ("myresult .jsp") .forward (req, resp); 

上 
} 
protected void doGet (HttpServletRequest req, HttpServletResponse resp) 

throws ServletException, IOException { 

doPost (req, resp); } 
} 


【代码 说 明 】 
(1) 运用 req 对 象 接收 订单 状态 和 订单 编号 ， 然 后 封装 到 订单 实体 类 对 象 (orders) 中 。 
(2) 用 户 修改 状态 的 请 求 有 两 种 ， 由 订单 状态 1( 未 付款 订单 ) 改 为 2( 已 付款 订单 )， 由 
订单 状态 3( 已 发 货 ) 改 为 4( 已 收 货 )。 
当 用 户 进行 第 一 种 请 求 时 ， 调 用 业务 逻辑 类 updateOrdersState(orders) 方 法 ， 进 行 订 单 
状态 更 新 ， 如 果 返 回 值 为 真 ， 还 要 赠送 用 户 相 应 的 积分 ， 积 分 总 额 等 于 购物 总 额 的 整数 。 
还 要 调用 积分 业务 逻辑 类 方法 addPoint(point) 并 把 赠送 积分 记录 插入 到 point( 积 分 ) 表 


4. 删除 我 的 订单 功能 设计 


当 用 户 登录 成 功 后 ， 进 入 个 人 中 心 ， 在 orders.jsp 页 面 发 出 删除 订单 的 请 求 后 ， 系 统 就 
会 交 给 OrdersDeleServlet 来 处 理 。 具 体 代 码 如 下 : 


QWebServlet (name = "OrdersDeleServlet",urlPatterns = "/ordersDele.do") 
public class OrdersDeleServlet extends HttpServlet { 
protected void doPost (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { doGet(req, resp); } 
protected void doGet (HttpServletRequest req, HttpServletResponse resp) 

throws ServletException, IOException { 

String orderId =req.getParameter ("orderId"); 

IOrdersService ordersService = new OrdersServiceImp]l (); 

Orders orders=new Orders(); 

orders=ordersService.getOrdersByOrderId (orderId ); 

if (orders.getstate()!=1){ 

String msg = "该 订单 状态 已 付款 ， 不 能 撤销 "; 

req.setAttribute ("msg", msg); 

req.getRequestDispatcher ("result.jsp") .forward (req, resp); 

} else { 

if (ordersService.deleteOrders (orderId)) { 

String msg = "成 功 删除 ! "; 

req.setAttribute ("msg", msg); 

req.getRequestDispatcher ("result.jsp") .forward (req, resp); 
} else { 
String msg = "删除 失败 ! "; 
req.setAttribute ("msg", msg); 
req.getRequestDispatcher ("result.jsp") .forward (req, resp); 


量 


o 
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上 


【代码 说 明 】 
删除 订单 时 ， 首 先 看 一 下 订单 状态 ， 如 果 订 单 状态 不 是 1， 说 明 该 订单 已 经 处 理 ， 则 
不 能 删除 ， 否 则 订单 业务 处 理 类 方法 由 ordersService.deleteOrders(orderId) 来 删除 订单 。 


小 提示 : Servlet 与 Java 类 的 区 别 

Servlet 是 一 个 供 其 他 Java 程序 (Servlet 引擎 ) 调 用 的 Java 类 ， 它 不 能 独立 运行 ， 它 的 运 
行 完 全 由 Servlet 引擎 来 控制 和 调度 。 

针对 客户 端的 多 次 Servlet 请 求 ， 通 常情 况 下 ， 服 务 器 只 会 创建 一 个 Servlet 实例 对 
象 。 也 就 是 说 ，Servlet 实例 对 象 一 旦 创建 ， 它 就 会 驻 留 在 内 存 中 ， 为 后 续 的 其 他 请 求 服 
务 ， 直 至 Web 容器 退出 ，Servlet 实例 对 象 才 会 销毁 。 

在 Servlet 的 整个 生命 周期 内 ，Servlet 的 init() 方 法 只 被 调用 一 次 。 而 对 一 个 Servlet 的 
每 次 访问 请 求 都 导致 Servlet 引擎 调用 一 次 Servlet 的 service() 方 法 。 对 于 每 次 访问 请 求 ， 
Servlet 引擎 都 会 创建 一 个 新 的 HttpServletRequest 请 求 对 象 和 一 个 新 的 HttpServletResponse 
响应 对 象 ， 然 后 将 这 两 个 对 象 作为 参数 传递 给 它 调 用 的 Servlet 的 service() 方 法 ，service() 
方法 再 根据 请 求 方式 分 别 调用 doXXX0 方 法 。 
如 果 在 <servlet> 元 素 中 配置 了 一 个 <load-on-startup> 元 素 ， 那 么 Web 应 用 程序 在 启动 
就 会 装载 并 创建 Servlet 的 实例 对 象 ， 以 及 调用 Servlet 实例 对 象 的 init() 方 法 。 


(四 ) 我 的 订单 子 模块 视图 层 设计 
1. 显示 我 的 订单 (myOrderslnfo.jsp) 页 面 设计 
代码 如 下 : 


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 

<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 

<!DOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title> 个 人 中 心 </title> 

<link type="text/css" rel="stylesheet" href="css/font-awesome.css"> 
<link type="text/css" rel="stylesheet" href="css/font-— 

awesome .min.css"> 
<link type="text/css" rel="stylesheet" href="css/reset.css"> 
<link type="text/css" rel="stylesheet" href="css/ordersInfo.css"> 
</head> 

<body> 

<jsp:include page="head.jsp"/> 

<div class="crumb"> 
<div class="Ww"> 


时 


<div class="crumb-con"> 


153 


沙 水 全 会 八 片 十 大 音 郧 『 出 上 川 十 上 厅 驯 放 驯 辐 内 


斗 水 注 


、 电子 商务 网 站 建设 企业 案例 


<a href="index.do" class="link">MMAIL</a> 


<span>></span> 
<span class="1ink-text"> 我 的 订单 </span> 
</div> 
</div> 


</div> 
<div class="page-wrap w"> 
<jsp:include page="left.jsp"/> 
<div class="content with-nav"> 
<div class="panel"> 
<div class="panel-title"> 我 的 订单 </div> <span 
id="spanl2">${resu}</span> 
<div class="panel-body"> 
<table class="table" cellspacing="0" cellpadding="0"> 
<thead> 
<tr> 
<th wiqdth="15%"> 订 单 编号 </th> 
<th width="15%"> 真 实 姓 名 </th> 
<th width="10%"> 手 机 </th> 
<th width="10%"> 金 额 </th> 
<th width="15%"> 时 间 </th> 
<th width="10%"> 状 态 </th> 
<th width="25%"> 操 作 </th> 
</Er> 
</thead> 
<tbody> 
<c:forEach items="$ {ordersInfo}" var="orders"> 
<tr> 
<td width="15%">$ {orders.orderId}</td> 
<td width="15%">$ {orders.truename}</td> 
<td 15%">${orders.phone}</td> 
<td 10%">$ {orders.sum}</td> 
<td width="15%">${orders.addtime}</td> 
<td width="10%"> 
<c:if test="${orders.state==1}"> 未 付款 </c:if> 
<c:if test="${orders.state==2}"> 已 付款 </c:if> 
<c:if test="${orders.stat }"> 已 发 货 </c:if> 
<c:if test="${orders.state==4}"> 订 单 完 成 </c:if> 
</td> 
<td width="20%"><a class="link" href="ordersDele.do? 
orderId=$ {orders.orderId}"” onClick="return confirm(' 您 确定 进行 撤销 操作 吗 ? ')"> 
撤销 </a> 


<a class="link" 
href="ordersList.do?orderId=${orders.orderId}"> 订 单 明 细 </a></td> 

</Er> 

</c:forEach> 

</tbody> 

</table> 
</div> 
</div> 
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<div class="pg-content"> 
<form class="page-form" method="post" onsubmit="return 
checkForm();" action="$ {url}"> 
<input type="text" name="currentPage" id="currengPage" 
class="page” > 
<input type="submit" value="go" > 
</form> 
<c:if test="${page.hasFirst}"> 
<li><a href="${url}currentPage=1"> 首 页 </a></1i> 
ele 
<c:if test="${page.hasPrevious}"> 
<li><a href="$ {url}currentPage= 
${page.currentPage-1}"> 上 一 页 </a></1i> 
He 
<c:if test="$ {page.hasNext}"> 
<li><a href="${url}currentPage= 
${page.currentPage+1}"> 下 一 页 </a></1i> 
WetE> 
<c:if test="${page.hasLast}"> 
<li><a href="${url}currentPage= 
${page.totalPage}"> 尾 页 </a></1i> 
区 下 > 
<span class="pg-total"> 
当前 第 $ {page .currentPage} 页 ， 总 共 ${page .totalPage} 页 </span> 
</div> 
</div> 
<jsp:include page="foot.jsp"/> 
</body> 
</html> 


【代码 说 明 】 

该 页 面 显示 登录 用 户 的 所 有 订单 ， 并 进行 分 页 显示 ， 该 页 面 接收 AdminAllOrdersServlet 
传 回 的 分 页 集合 对 象 ordersInfo、 分 页 容器 对 象 page 及 地 址 栏 变量 url， 通 过 JSTL 标签 进 
行 遍历 解析 ， 把 内 容 显示 到 当前 页 面 上 。 运 行 效果 如 图 7-4 所 示 。 


五 


QZMALL [ss 


‘ferngcteng 


rnortheng 


图 7-4 我 的 订单 (myOrderslnfojsp) 页 面 
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2. 显示 我 的 订单 明细 (myOrdersListjsp) 页 面 设计 
代码 如 下 : 


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title> 个 人 中 心 </title> 
<link type="text/css" rel="stylesheet" href="css/font-awesome.css"> 
<link type="text/css" rel="stylesheet" href="css/font- 
awesome.min.css"> 
<link type="text/css" rel="stylesheet" href="css/reset.css"> 
<link type="text/css" rel="stylesheet" href="css/ordersList.css"> 
</head> 
<body> 
<jsp:include page="head.jsp"/> 
<div class="crumb"> 
<div class="w"> 
<div class="crumb-con"> 
<a href="index.do" class="1ink">MMRIL</a> 
<span>></span> 
<span class="1link-text"> 我 的 订单 </span> 
</div> 
</div> 
</div> 
<div class="page-wrap w"> 
<jsp:include page="left.jsp"/> 
<div class="content with-nav"> 
<div class="panel"> 
<div class="panel-title"> 修 改 订单 状态 </div> <span id="span12"> 
${resu}</span> 
<form name="forml" method="post" action="updateOrderstate.do"> 
<div class="panel-body"> 
<div class="form-line"> 
<span class="label"> 收 货 人 : </span> 
<span class="text">${orders.truename}</span> 
<input id="orderId" name="orderId" 
value="$ {orders.orderId}" type="hidden" readonly="true"> 
<span class="label"> 手 &nbsp; gnbsp; 机 : </span> 
<span class="text">${orders.phone}</span> 
</div> 
<div class="form-line"> 
<span class="label"> 地 gnbsp; gnbsp; &nbsp; &gnbsp; 址 : </span> 
<span class="text">${orders.address}</span> 
<span class="label"> 邮 &nbsp; gnbsp; 编 : </span> 
<span class="text">${orders.postcode}</span> 
</div> 
<div class="form-line"> 
<span class="label"> 金 enbsp; &nbsp; &nbsp; &gnbsp; 额 : </span> 
<span class="text"><input type="text" id="sum" name="sum" 
value="$ {orders.sum}" readonly="true"></span> 
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<span class="label"> 状 &nbsp; gnbsp; 态 : </span> 
<span class="text"><select name="state"> 
<c:if test="${orders.state==1}"> 
<option value="1" selected="selected" 
disabled="disabled"> 未 付款 </option> 
<option value="2" > 已 付款 </option> 
CE 
<c:if test="${orders.state==2}"> 
<option value="2" selected="selected" 
disabled="disabled"> 客 户 已 付款 </option> 
</er lf> 
<c:if test="${orders.state==3}"> 
<option value="3" selected="selected" 
disabled="disabled"> 商 家 已 发 货 </option> 
<option value="4" > 用 户 已 收 货 </option> 
i 
<c:if test="${orders.state==4}"> 
<option value="4" selected="selected" 
disabled="disabled"> 用 户 已 收 货 </option> 


</c:if> 
</select></span> 

</div> 全 
<div class="form-line"> 国 
<span class="text"><input class="btn" type="submit" 局 
value=" 提 交 "></span> 职 
</div> | 
</div> 过 
</form> 十 
<div class="panel-body"> = 
<table class="table" cellspacing="0" cellpadding="0"> 五 
<thead> -二 
<tr> 贯 
<th width="20%"> 订 单 编号 </th> 穿 
<th width="20s"> 商 品 编号 </th> 二 
<th width="20%"> 商 品名 称 </th> 二 
<th width="20%"> 数 量 </th> 立 
<th width="20%"> 价 格 </th> 人 
</tr> 创 
</thead> 新 
<tbody> 规 
<c:forEach items="${ordersItemList}" var="item"> 划 

<tr> 
<td width="20%">${item.orderId}</td> 材 


<td width="20%">${item.pid}</td> 
<td width="20%">${item.shopname}</td> 


<td widt 20%">${item.shopnum}</td> 
<td width="20%">${item.price}</td> 
</tr> 
</c:forEach> 
</tbody> 
</table> 
</div> 
</div> 
</div> 


<jsp:include page="foot.jsp"/> 
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</body> 
</html> 


【代码 说 明 】 

该 页 面 接收 OrdersListServlet 传 回 的 订单 主 表 实体 类 对 象 order 和 订单 明细 集合 类 
ordersItemList， 通 过 EL 和 JSTL 标签 进行 遍历 解析 ， 把 某 一 订单 编号 的 内 容 显示 到 当前 页 
面 上 ， 运 行 效果 如 图 7-5 所 示 。 


QZMALL 


修 站 订单 状态 
站 iA: frgdang 手机 : 15399562053 


地 址 :天 所 市 卫 ICX 榴 121 等 。 网 : 066004 


EE 全 看: EEN 
提交 

bos) Ci Bm ee] 

151720804S168604 四 导电 内 1 3090 


1517208045169604 国 dsp 1 000 


图 7-5 我 的 订单 明细 (myOrdersListjsp) 页 面 
3. 个 人 中 心 操作 通用 提示 页 (myresultjsp) 设 计 
代码 如 下 : 


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" $%> 
<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title> 个 人 中 心 </title> 
<link type="text/css" rel="stylesheet" href="css/font-awesome.css"> 
<link type="text/css" rel="stylesheet" href="css/font- 
awesome.min.css"> 
<link type="text/css" rel="stylesheet" href="css/reset.css"> 
<link type="text/css" rel="stylesheet" href="css/myresult.css"> 
</head> 
<body> 
<jsp:include page="head.jsp"/> 
<div class="crumb"> 
<div class="w"> 
<div class="crumb-con"> 
<a href="index.do" class="link">MMAIL</a> 


<span>></span> 
<span class="link-text"> 个 人 中 心 </span> 
</div> 
</div> 
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</div> 
<div class="page-wrap Ww"> 
<jsp:include page="left.jsp"/> 
<div class="content with-nav"> 
<div class="result-con"> 
<hl class="result-title">$ {msg}</hl> 
<div class="result-content"> 
<a href="ordersInfo.do?currentPage=1"” class="1link"> 我 的 订单 </a> 
</div> 
</div> 
</div> 
<jsp:include page="foot.jsp"/> 
</body> 
</html> 


第 七 


接着 上 一 个 页 面 ， 当 修改 订单 状态 并 提交 时 ， 显 示 的 结果 如 图 7-6 所 示 ， 表 示 修 改 订单 


状态 成 功 。 
QZMALL [= 
。 修改 订单 状态 成 功 ! 
7-6 ”显示 订单 状态 修改 成 功 
(五 ) 配 置 web.xml 
代码 如 下 : 


<?xml Version="1.0" encoding="UTF-8"?> 
<web-app xmlns="http://xmlns.jcp.org/zxml/ns/javaee" 
xmlns:xsi="http://www.w3.0rg/2001/xMLSchema-instance" 
xsi:schemaLocation="http://zxmlns.jcp.org/xml/ns/javaee 
http://xmlns.jcp.org/xml/ns/javaee/web-app 3 1.xsd" 
version="3.1"> 
<display-name>ecshop</display-name> 
<welcome-file-list> 
<welcome-file>index.jsp</welcome-file> 
</welcome-file-list> 
<context-param> 
<param-name>login page</param-name> 
<param-value>/login.jsp</param-value> 
</context-param> 
<context-param> 
<param-name>login admin</param-name> 
<param-value>/adminlogin.jsp</param-value> 
</context-param> 
<filter> 
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<filter-name>validateLogn</filter-name> <filter— 
class>com.qzmall.filter.ValidateFilter</filter-class> 

</filter> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/cart.jsp</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/cartSsServlet .jsp</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/userIinfoSave.do</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/userIinfoSave.do</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/myOrdersInfo.jsp</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/myOrdersInfo.jsp</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/ordersInfo.do</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/ordersList.do</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/ordersDele.do</url-pattern> 

</filter-mapping> 

<filter-mapping> 

<filter-name>validateLogn</filter-name> 

<url-pattern>/modifypass.jsp</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/modifypass.jsp</url-pattern> 

</filter-mapping> 

<filter-mapping> 
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<filter-name>validateLogn</filter-name> 


<url-pattern>/modifyPass.do</url-pattern> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/modifyPass.do</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/myPoint .do</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/myPoint .jsp</url-pattern> 

</filter-mapping> 

<filter-mapping> 

<filter-name>validateLogn</filter-name> 

<url-pattern>/order.jsp</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/orderServlet .do</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/checkout .jsp</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/checkOut .do</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>validateLogn</filter-name> 
<url-pattern>/updateOrderstate.do</url-pattern> 

</filter-mapping> 


</web-app> 
【代码 说 明 】 
上 述 页 面 及 控制 层 的 servlet( 包 括 第 六 章 ) 讲 的 内 容 都 必须 是 登录 以 后 才能 进行 操作 ， 


所 以 web.xml 配置 了 一 个 登录 过 滤器 ， 从 而 限制 未 登录 用 户 的 非法 操作 。 
课堂 技能 训练 : 
【 实 训 操作 内 容 】 完 成 我 的 订单 状态 修改 功能 设计 。 
【 实 训 操作 步 又 】 
(1) 持久 层 设 计 。 
(2) 业务 逻辑 层 设计 。 


(3) 控制 


(4) 视图 


层 设计 (重点 ， 订 单 状态 修改 了 ， 应 奖励 用 户 积分 )。 
层 设计 。 
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【知识 拓展 】 


订单 是 在 用 户 提交 购物 车 里 购买 的 商品 时 保存 的 订单 信息 ， 为 初始 信息 ， 此 时 状态 为 
未 支付 。 但 本 网 站 并 未 实现 网 站 的 在 线 支付 功能 ， 因 为 要 实现 在 线 支付 功能 ， 必 须 通过 中 
间 公 司 间接 与 银行 对 接 ， 所 以 这 部 分 功能 还 不 能 实现 。 要 实现 在 线 支 付 的 功能 一 般 是 需要 
用 户 选 择 支付 方式 ， 进 行 相应 的 付款 操作 。 此 时 订单 状态 需要 根据 支付 结果 来 修改 ， 如 果 
支付 成 功 ， 银 联 或 者 支付 宝 、 微 信 会 从 后 台 通 知 到 你 的 应 用 ， 订 单 状态 修改 为 已 支付 ; 如 
果 没 有 支付 成 功 ， 订 单 状 态 还 是 未 支付 ， 网 站 需要 和 银联 或 者 支付 宝 、 微 信 等 第 三 方 支付 
机 构建 立 对 账 机 制 ， 保 证 程序 内 出 现 订单 状态 不 一 致 时 能 够 及 时 解决 。 


课 后 训练 
一 、 选择 题 


1. 在 JavaEE 中 ，Servlet 是 在 服务 器 端 运行 ， 以 处 理 客户 端 请 求 而 做 出 的 响应 的 程 
序 ， 下 列 选项 中 属于 Servlet 生命 周期 阶段 的 是 ( 。”)。 


A. 加 载 和 实例 化 B. 初始 化 C. 服务 
D. 销毁 E. 以 上 全 部 
2. 在 JavaEE 中 的 MVC 设计 模式 中 ，(  ) 负 责 接 收 客户 端的 请 求 数据 。 
A. JavaBean B. JSP C. Servlet D. HIML 
3. 过 滤器 应 实现 的 接口 是 (  )。 
A. HttpServlet B. HttpFilter C. ServletFilter ~ D. Filter 


4. 开发 Java Web 应 用 程序 的 时 候 ， 创 建 一 个 Servlet， 该 Servlet 重 写 了 父 类 的 doGet() 
和 doPost() 方 法 ， 那 么 其 父 类 可 能 是 ( 。 )。 


A. RequestDispatcher B. HttpServletResponse 
C. HttpServletRequest D. HttpServlet 

5. 在 Java Web 开发 中 ， 如 果菜 个 数据 需要 跨 多 个 请 求 存在 ， 则 数据 应 该 存储 在 ( 。“) 中 。 
A. session B. page C. request D. response 


6. 在 开发 Java Web 应 用 程序 的 时 候 ，HTTP 请 求 消息 使 用 Get 或 POST 方法 以 便 在 
Web 上 传输 数据 ， 下 列 关于 GET 和 了 POST 方法 描述 正确 的 是 ( 。 )。 
A. POST 请 求 的 数据 在 地 址 栏 不 可 见 
B. GET 请 求 提交 的 数据 在 理论 上 没有 长 度 限制 
C. POST 请 求 对 发 送 的 数据 的 长 度 限 制 在 240 一 255 个 字符 
D. GET 请 求 提交 数据 更 加 安全 
7. 在 JSP 中 有 EL 表达 式 ${10*10 ne 10}， 结 果 是 (  )。 
A. 100 B. tme C. false D. 以 上 都 不 对 
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8. 关于 JSTL 标签 的 分 类 以 下 说 法 正确 的 是 (  )。 


A. 通用 标签 与 移 代 标签 B. 核心 标签 与 迭代 标签 
C. 核心 标签 与 SQL 标签 D. 以 上 都 不 是 


9. 在 Java Servlet API 中 ，HttpServletRequest 接口 的 (  ”) 方 法 用 于 返回 当前 请 求 相关 


联 的 会 话 ， 如 果 没有 ， 返 回 null。 


A. getSession() //=getSession(true) 默 认为 : getSession(true) 
B. getSession(true) 
C. getSession(false) 
D. getSession(null) 
10. 在 Java Web 开发 中 ， 不 同 的 客户 端 需要 共享 数据 ， 则 数据 应 该 存储 在 ( 。”) 中 。 
A. session B. application C. request D. response 


11. 利用 三 层 结 构 搭建 某 网 上 书店 系统 ， 设 计 用 户 登录 界面 ， 如 果 你 是 设计 人 员 ， 你 


将 在 三 层 结构 的 ( 。 “”) 中 实现 。 


日 


古人 ( 


( 


A. 模型 层 B. 表示 层 C. 数据 访问 层 ”DD. 业务 逻辑 层 

12. 在 JavaEE 中 ，(  ”) 接 口 定义 了 getSession() 方 法 。 
A. httpServlet B. HttpSession 
C. HttpServletRequest D. HttpServletResponse 

13. JSP 标准 标签 库 (JSTL) 提 供 的 主要 标签 库 中 ， 其 中 ( ”) 可 用 于 操作 数据 库 。 
A. 核心 标签 库 B.I18N 与 格式 化 标签 库 
C. XML 标签 库 D. SQL 标签 库 

14. JSP 表达 式 可 用 于 在 网 页 上 生成 动态 的 内 容 并 代替 JSP 元 素 ，JSP 表达 式 的 语法 

六 

A. {EL expression} B. ${EL expression} 
C. @{EL expression} D. #{EL expression} 

15. 在 J2EE 的 体系 结构 中 ， 系 统 的 业务 和 功能 代码 组 成 了 三 层 结 构 中 的 ( 。”)。 
A. 表示 层 B. 中 间 层 C. 数据 层 D. 客户 端 层 

16. 在 JSTL 的 迭代 标签 <forEach> 的 属性 中 ， 用 于 指定 要 遍历 的 对 象 集合 ( 。”)。 
A.var B. items C. value D. varStatus 


17. 如 果 不 希 望 JSP 网 页 支持 session， 应 该 ( )。 

A. 调用 HttpSession 的 invalidate() 方 法 

B. 设置 <%(@ page session='"false"> 

C. 在 JSP 页 面 中 写 入 代码 HttpSession session=request.getSession(false); 

D. 调用 HttpSession 的 setMaxInactiveInterval()， 将 时 间 设 置 为 0 
18. Servlet 是 一 个 在 服务 器 上 运行 、 处 理 请 求 信息 并 将 其 发 送 到 客户 端的 Java 程序 ， 
) 接 受 服务 请 求 后 ， 找 到 Servlet 类 、 加 载 Servlet 类 并 创建 Servlet 对 象 。 

A. 客户 端 B. 正 浏览 器 C. Servlet 容器 。 DD. Servlet 本 身 
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19. MVC 设计 模式 包含 模型 层 、 视 图 层 和 控制 层 ， 在 下 列 组 件 中 扮演 控制 器 角色 的 
县 (， 玉 
A. Servlet B. JSP C. JavaBean D. HIML 
二 、 实 际 操作 题 
利用 三 层 架 构 ， 写 出 用 户 模块 中 的 个 人 积分 浏览 和 修改 密码 的 功能 。 


第 七 章 购物 车 及 定单 模块 设计 .pptx 第 七 章 习题 答案 .docx 
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第 八 登 
后 台 维 护 模 块 设 计 


电子 商务 网 站 建设 企业 案例 


知识 能 力 目标 

. 掌握 组 件 常用 的 类 与 方法 。 

. 掌握 在 Servlet 中 应 用 组 件 进行 文件 上 传 的 方法 ， 
. 掌握 商品 添加 和 维护 的 基本 流程 。 

. 掌握 后 台 订单 维护 的 基本 流程 。 

. 能 够 运用 上 传 组 件 进行 文件 的 上 传 。 

.能够 完成 商品 添加 和 维护 的 编码 设计 . 

.能够 完成 后 台 订单 维护 的 编码 设计 . 


ODO- 


了 问题 提示 1 _ 

一 个 完整 的 电 商 平台 由 前 台 ( 客 户 端 ) 和 后 台 ( 服 务 端 ) 两 部 分 组 成 。 

前 台 (客户 端 ) 按 目前 主流 平台 分 为 Web、WAP、iOS 和 Android; 前 台 主 要 面向 的 对 象 
是 广大 互联 网 用 户 ， 作 用 是 提供 一 个 让 用 户 从 浏览 、 挑 选 商品 到 下 单 付款 全 过 程 的 平台 ， 
所 以 搭建 前 台 的 重点 是 建立 和 打通 整个 购物 流程 ， 在 这 之 后 再 提供 因为 业务 需要 不 断 添加 
的 功能 点 和 提升 用 户 体验 的 交互 。 

后 台 (服务 端 ) 的 面向 对 象 是 公司 内 部 人 员 ， 主 要 作用 是 为 前 台 业 务 提供 支持 并 对 数据 
结构 、 储 存 和 流向 进行 控制 的 一 套 体系 。 

如 果 将 电 商 的 整套 体系 比 作 一 座 大 house 的 话 ， 那 么 后 台 ( 服 务 端 ) 就 是 埋 在 地 下 的 地 
基 ， 而 前 台 ( 客 户 端 ) 则 是 建 在 地 面 上 的 house。 用 户 来 到 house 后 不 会 关心 地 基 是 怎么 搭建 
的 ， 他 只 会 注意 到 house 的 样式 和 house 中 的 房间 是 什么 样 的 ; 前 后 台 也 像 这 座 house 的 
地 下 和 地 上 部 分 一 样 有 着 相辅相成 的 关系 。 

问题 : 电子 商务 网 站 的 后 台 主 要 提供 哪些 服务 ? 


第 一 节 ”添加 商品 子 模块 设计 


上 则 一 、 文 件 上 传 组 件 commons-fileUpload 简介 


commons-fileUpload 上 传 组 件 是 Apache 的 一 个 开源 项 目 ， 该 组 件 需 要 commons-io 包 
的 支持 。 它 使 用 方便 ， 同 样 可 以 实现 一 个 或 多 个 文件 的 上 传 ， 也 可 实现 限制 上 传 文件 大 小 
等 功能 。 

在 文件 上 传 中 ， 文 件 上 传 请 求 由 有 序 的 表单 项 列表 组 成 ，fileUpload 能 够 解析 上 传 请 
求 ， 然 后 响应 提供 一 个 单独 的 文件 表单 项 的 列表 。 每 个 这 样 的 表单 项 都 实现 了 FileItem 接 
口 ， 并 包含 文件 名 等 属性 。 


(一 ) 使 用 要 求 
(1) 使 用 commons-fileUpload 组 件 上 传 文件 时 ， 需 要 将 form 表单 的 enctype 属性 设置 
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为 multipart/form-data; 同时 还 需要 设置 上 传 文件 在 内 存 中 的 大 小 ， 多 余 的 部 分 存储 在 磁 


盘 中 。 


(2) 将 相应 的 commons-fileUpload 包 和 commons-io 包 复 制 放 入 到 用 户 的 Web 工程 
WEN-INF/lib 目录 下 即 可 。 


(二 ) 使 用 步骤 


(1) 创建 磁盘 工厂 DiskFileItemFactory 对 象 ， 用 来 配置 上 传 组 件 ServletFileUpload。 代 


码 如 下 : 


DiskFileItemFactory factory = new DiskFileItemFactory(); 


DiskFileItemFactory 类 的 常用 方法 ， 如 表 8-1 所 示 。 


表 8-1 DiskFileltemFactory 类 的 常用 方法 


该 方法 需要 传 入 一 个 int 型 参数 ， 用 来 设置 最 大 内 存 大 小 (Byte 为 单位 ) 


该 方法 需要 传 入 一 个 string 型 参数 ， 用 来 设置 临时 文件 目录 


获取 保存 临时 文件 地 址 


(2) 创建 ServletFileUpload 实例 ， 即 创建 上 传 文件 的 句柄 。 
可 通过 DiskFileItemFactory 实例 构造 ServletFileUpload 对 象 。 代 码 如 下 : 


ServletFileUpload upload = newServletFileUpload (factory); 


ServletFileUpload 类 的 常用 方法 ， 如 表 8-2 所 示 。 


表 8-2 ServletFileUpload 类 的 常用 方法 


返回 值 


检查 是 否 是 一 个 文件 上 传 请 求 


从 request 对 象 中 得 到 所 有 上 传 域 表 单 


二 、 添 加 商品 功能 实现 


(一 ) 添 加 商品 持久 层 设计 


1. 接口 类 设计 


在 com.qzmall.dao.IShopDao 类 下 添加 以 下 方法 : 


public interface IShopDao { 
// 添 加 商品 
public boolean Addshop (Shop shop); 


} 


2. 接口 实现 类 设计 
在 com.qzmall.dao.impl.ShopDaoImpl 类 下 实现 商品 添加 方法 : 
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public class ShopDaoImpl implements IShopDao { 
ee 
该 方法 用 来 向 表 shop 添加 一 条 记录 ， 以 商品 对 象 为 参数 ， 返 回 结果 为 布尔 类 型 ， 表 示 


商品 记录 是 否 插入 成 功 。 代 码 如 下 : 


Goverride 
public boolean AddShop (Shop shop) { 
String strSql = "insert into shop 
(cid, sid, shopname, shopinfo, price, stock, 
shopdate, imagel, image2, image3, description) values (2?,2,2,2,2,2,2,2,2,2,2)"; 
return DBUtil.executeUpdate (strSq1， shop.getCategory() .getcid(), 
shop.getsubCate() .getsid(), shop.getshopname(), shop.getshopinfo(), 
shop.getPrice(), shop.getstock(), shop.getShopdate(), shop.getImagel(), 
shop.getImage2(), shop .getImage3 () ，shop.getDescription()) > 0; 
} 
} 


(二 ) 商 品 添加 子 模块 逻辑 层 设计 
1. 接口 类 设计 
接口 类 放 在 com.qzmall.service.IShopService 类 下 ， 接 口 类 设计 的 方法 与 持久 层 相 同 ， 


这 里 不 再 资 述 。 
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2. 接口 实现 类 设计 
接口 类 方法 放 在 com.qzmall.service.impl.ShopServiceImpl 类 下 。 代 码 如 下 : 


public class ShopServiceImpl implements IShopService { 
@Override 
public boolean Addshop (Shop shop) { 
IShopDao shopDao=new ShopDaoImpl (); 
return shopDao.AddShop (shop); 
} 
} 


(三 ) 上 传 商品 工具 类 (UploadUtils) 一 一 生成 唯一 文件 方法 设计 
代码 如 下 : 


public class UploadUtils { 
/** 
* 生成 唯一 的 文件 名 : 
让 
public static String getUUIDFileName (String fileName){ 
// 将 文件 名 的 前 面部 分 进行 截取 : xx.jpg  ---> .jpg 
int idx = fileName.lastIndexOf ("™."); 
String extention = fileName.substring (idx); 
String uuidFileName = UUID.randomUUID () .tostring() .replace("™—", 
nm) +extentiony7 
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return uuidFileName; 
} 
public static void main(string[] args) { 
System.out.println (getUUIDFileName ("1.jpg")); 
站 
站 


(四 ) 商 品 添加 子 模块 控制 层 类 设计 

商品 管理 模块 控制 层 类 在 com.qzmall.servlet.shop 包 下 。 

1. 跳 转 到 增加 商品 页 面 (addshop.jsp) 

当 管 理 员 从 menujsp 页 面 发 出 添加 商品 的 请 求 时 ， 系 统 就 会 交 给 AddShopServlet 来 处 
理 ， 该 类 通过 调用 业务 逻辑 类 的 方法 getShopPage 来 实现 全 部 商品 分 页 展示 的 功能 。 有 具体 
代码 如 下 : 


@WebServlet (name = "RddShopServlet",urlPatterns = "/admin/addshop.do") 
public class AddShopServlet extends HttpServlet { 
protected void doGet (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
String con=req.getParameter ("con"); 
req.setAttribute ("con", con); 
IShopService categoryService=new ShopServiceImpl (); 
ArrayList<Category> categoryArrayList=categoryService.getCategoryAll (); 
req.setAttribute ("categoryArrayList",categoryArrayList); 
req.getRequestDispatcher ("addshop.jsp") .forward (req, resp); 


国 纱 


. 


【代码 说 明 】 

在 上 述 代码 中 ， 首 先 调用 categoryService.getCategoryAllO 得 到 所 有 分 类 对 象 
categoryArrayList， 然 后 把 它 传 回 页 面 主页 面 addshop.jsp， 主 要 用 于 管理 者 在 添加 商品 时 ， 
方便 选择 商品 类 别 。 

2. 保存 添加 商品 信息 功能 设计 


水 僵 仿 便 片 十 大 音 郧 【出 川 十 上 厅 驯 滔 台 
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当 管 理 员 通过 addshopjsp 页 面 发 出 商品 提交 信息 时 ， 就 会 交 给 SaveShopServlet 类 进 
行 处 理 ， 通 过 调用 商品 业务 逻辑 类 AddShop 来 实现 商品 添加 的 功能 。 具 体 代码 如 下 : 


@Webservlet (name = "SaveShopServlet",urlPatterns = "/admin/saveShop.do") 
public class SaveShopServlet extends HttpServlet { 
public void doPost (HttpServletRequest req, HttpServletResponse resp) 
throws IOException, ServletException { 

Shop shop = new Shop(); 

ICategoryService categoryService=new CategoryServiceImpl (); 

int i=0; 

String []pic=new String[3]; 

// 定义 一 个 Map 集合 用 于 保存 接收 到 的 数据 


Map<String，String> map = new HashMap<String, String>(); 
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// 工 -创建 一 个 磁盘 文件 项 工厂 对 象 
DiskFileItemFactory diskFileItemFactory = new 
DiskFileItemFactory(); 
// 2 .创建 一 个 核心 解析 类 
ServletFileUpload servletFileUpload = new 
ServletFileUpload (diskFileItemFactory); 

// 3. 解 析 request 请 求 ， 返 回 的 是 List 集合 ，List 集合 中 存放 的 是 FileItem 对 象 
servletFileUpload.setSizeMax(1000*1024); 
List<FileItem> list=null; 

Ew 
list = servletFileUpload.parseRequest (req); 
} catch (FileUploadException e) { 
// 如 果 出 现 这 个 异步 ， 说 明 单个 文件 超出 了 80KB 
error ("上 传 的 文件 超出 了 1000KB"， req, resp); 
return; 
} 
String url = null; 
for (FileItem fileItem : list) { 
// 判断 是 表单 项 还 是 文件 上 传 项 
if (fileItem.isFormField()) { 
// 获得 表单 项 的 name 属性 的 值 
String name = fileItem.getFieldName (); 
// 获得 表单 项 的 值 
String value = fileItem.getstring ("UTF-8"); 
map.put (name, value); 
} else { 
// 如 果 是 文件 上 传 项 
// 获得 文件 上 传 的 名 称 
String fileName = fileItem.getName(); 
if(fileName !=null && !"".equals (fileName)){ 
if((!fileName.toLowerCase() .endsWith(".jpg")) && 
(!fileName .toLowerCase () .endsWith(".png")) ) { 
error (" 上 传 的 图 片 扩展 名 必须 是 jpg 或 者 png"， req， resp); 
return; } 
// 通过 工具 类 获得 唯一 文件 名 
String uuidFileName = 
UploadUtils.getUUIDFileName (fileName); 
// 获得 文件 上 传 的 数据 
InputStream is = fileItem.getInputstream(); 
// 获得 文件 上 传 的 路 径 
string path = 
this .getServletContext () .getRealPath ("/img//pic"); 
// 将 输入 流 对 接 到 输出 流 就 可 以 了 
url = path+"\\"+uuidFileName; 
pic[i]=uuidFileName; 
RE 
System.out.println ("url="+url); 
OutputStream os = new FileOutputstream(url); 
int len = 0; 
byte[] b = new byte[1024]; 
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while((len = is.read(b))!=-1){ 
os.write(b, 0, len); 

Vy 
SClose(y7> 
os.close () 7 

} 

// 获得 Servletcontext 对 象 
System.out.println (pic[1]); 
String ss = map.get ("sid"); 

int sid = Integer.parseInt (ss); 

int cid = categoryService.getcid(sid) 7 
Category category = new Category(); 
category.setCid(cid); 

SubCate subCate = new SubCate(); 
subCate.setsid(sid); 
shop.setshopname (map.get ("shopname")); 
shop.setshopinfo (map.get ("shopinfo")); 
shop.setCategory (category); 
shop.setsubCate (subCate); 

shop.setPrice (Float .parseFloat (map.get ("price"))); 


shop.setShopdate (StringHelper.getCurrentFormatDate()); 


shop.setstock(0); 
shop.setImagel (pic[0]); 
shop.setImage2 (pic[1]); 
shop.setImage3 (pic[2]); 
shop.setDescription (map.get ("description")); 
// 将 注册 用 户 的 信息 存 入 到 List 集合 中 
IShopService shopService = new ShopServiceImpl (); 
if (shopService.Addshop(shop)) { 
String success = "商品 添加 成 功 ! "; 
this .getServletContext () .setAttribute ("msg", success); 
// 跳 转 到 result .jsp， 提 示 添 加 商品 成 功 
req.getRequestDispatcher ("result.jsp") .forward (req, resp); 
} else { 
String success = "商品 添加 失败 ! "; 
this .getServletContext () .setAttribute ("msg", success); 
// 跳 转 到 result.jsp， 提 示 添 加 商品 失败 
req.getRequestDispatcher ("result.jsp") .forward (req, resp); 
’ 
} 


private void error (String msg, HttpServletRequest request, 
HttpServletResponse response) 


throws ServletException, IOException { 

request .setAttribute ("msg", msg); 

request .getRequestDispatcher ("/admin/result .jsp"). 
forward (request, response); 
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【代码 说 明 】 
因为 添加 商品 时 ， 除 了 要 添加 商品 字段 外 ， 还 要 同时 上 传 商品 图 片 ， 这 时 还 要 用 到 上 


传 文件 的 包 commons-fileupload-1.3.3.jar。 使 用 这 个 包 时 ， 首 先 定义 一 个 map 对象 ， 用 以 接 
收 表单 传 来 的 数据 ， 同 时 要 区 分 出 是 普通 表单 项 ， 还 是 文件 上 传 项 。 如 果 是 文件 上 传 项 ， 


还 要 判 


断 上 传 文件 的 类 型 和 大 小 ， 符 合 要 求 之 后 ， 还 要 指定 唯一 的 文件 。 上 传 文件 成 功 之 


后 ， 还 要 把 上 传 文件 名 和 普通 表单 项 数据 封装 到 实体 对 象 shop 中 ， 再 调用 商品 业务 逻辑 方 
法 AddShop 来 实现 商品 添加 。 


(五 ) 商 品 添 加 子 模块 视图 层 设计 


加 商品 (addshop.jsp) 页 面 设计 。 代 码 如 下 : 


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" $%> 
<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 


| 


DOCTYPE html> 


<html> 
<head> 


<meta charset="UTF-8"> 

<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title> 添 加 商品 </title> 

<link type="text/css" rel="stylesheet" href="style/reset.css"> 
<link type="text/css" rel="stylesheet" href="style/addshop.css"> 


<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"> 
</script> 


<script type="text/javascript" src="js/addshop.js"></script> 


</head> 

<body> 

<jsp:include page="head.jsp"/> 
<div class="crumb"> 


<div class="w"> 
<div class="fl"> 
<a href="index.jsp" class="]link">QZMAIL</a> 


<span>></span> 
<span class="link-text">${con}</span> 
</div> 


<div class="fr"> 
<a href="exit.do" class="link"> 退 出 </a> 
</div> 
</div> 


</div> 
<div class="w"> 


<jsp:include page="menu.jsp"/> 
<div class="content"> 
<div class="content-con"> 
<span class="text"> 商 品 添加 ${sucess}</span> 
</div> 
<form action="saveShop.do" onSsubmit="javascript: return sendreg();" 


enctype="multipart/form-data" method="post" id="form"> 
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<div class="shop-con"> 
<ul> 
<1li><span class="label"> 商 品 品牌 : </span><span class="con"><input 
id="shopname" type="text" name="shopname" /></span></1i> 
<1li><span class="label"> 商 品 信息 : </span><span 
class="con"><input id="shopinfo" type="text" name="shopinfo" 
style="width:200px;" /></span></1i> 
<1i><span class="label"> 选 择 分 类 : </span> <span class="con"> 
<select name="sid" id="sid"> 
<c:forEach items="${categoryArrayList}" var="category"> 
<optgroup label="${category.cname}"> 
<c:forEach items="${category.subCates}" var="sname"> 
<c:if test="${category.cid==sname.category.cid}"> 
<option value="${sname.sid}"> Ls {sname. sname}</option> 
<Nenlt> 
</c:forEach> 
</optgroup> 
</c:forEach> 
</select></span> 
</1i> 
<li><span class="label"> 图 snbsp; 片 snbsp;1:</span> <span 
class="con"><input id="imagel" name="imagel" type="file" /></span> 
<span class="label"> 图 snbsp; 片 snbsp;2:</span> <span 
class="con"><input id="image2" type="file" name="image2" /></span> 
区 > 
<li><span class="label"> 图 snbsp; 片 snbsp;3:</span> <span 
class="con"><input id="image3" type="file" name="image3" /></span></1i> 
<1li><span class="label"> 商 品 售 价 : </span> <span class="con"><input 
id="price" type="text" name="price" value="59.0" /></span> </1i> 
<li><span style="vertical-align: top;font-size:14px; "> 商品 详情 : 
</span> <span class="con"><textarea rows="5" cols="40" wrap="hard" 
name="description" ></textarea> </span></1i> 
</ul> 
<div class="add-btn"><input type="submit" id="btn" class="btn" 
value=" 提 交 "/></qdiv> 
</div> 
</form> 
</div> 
</div> 
<jsp:include page="foot.jsp"/> 
</body> 
</html> 


【代码 说 明 】 
(1) 添加 商品 时 ， 由 于 要 上 传 多 张 商品 图 片 ， 而 且 要 用 到 一 个 上 传 jar 包 ， 这 个 jar 包 
要 求 我 们 必须 把 添加 商品 的 信息 分 成 普通 表单 项 和 上 传 文件 表单 项 ， 商 品 信息 提交 时 必须 
采用 post 方式 提交 。 
(2) 添加 商品 信息 时 ， 要 动态 选择 商品 分 类 ， 本 页 面 接收 AddShopServlet 传 回 的 
categoryArrayList， 运 用 JSTL 标签 进行 解析 ， 并 应 用 到 <select> 选 择 框 。 
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此 页 面 运行 效果 如 图 8-1 所 示 。 


92MALL 


msn 


图 8-1 商品 添加 页 面 (addshopJjsp) 


课堂 技能 训练 : 


【 实 训 操作 内 容 】 上 传 多 张 商品 图 片 并 改 为 唯一 文件 名 称 。 
【 实 训 操 作 要 求 】 

(1) 上 传 到 指定 目录 web/img 下 。 

(2) 多 文件 上 传 ， 上 传 文件 名 称 必须 是 唯一 的 。 

(3) 每 个 文件 大 小 不 能 超过 500KB。 


小 提示 : 什么 是 Spring Boot 


Spring Boot 是 由 Pivotal 团队 提供 的 全 新 框架 ， 其 设计 目的 是 用 来 简化 新 Spring 应 用 
的 初始 搭建 以 及 开发 过 程 。 该 框架 使 用 了 特定 的 方式 来 进行 配置 ， 从 而 使 开发 人 员 不 再 需 
要 定义 样板 化 的 配置 。 通 过 这 种 方式 ，Spring Boot 致力 于 在 莲 勃 发 展 的 快速 应 用 开发 领域 


(rapid application development) 成 为 领导 者 。 
(1) 创建 独立 的 Spring 应 用 程序 。 
(2) 嵌入 的 Tomcat， 无 须 部 署 WAR 文件 。 
(3) 简化 Maven 配置 。 
(4) 自动 配置 Spring. 
(5) 提供 生产 就 绪 型 功能 ， 如 指标 ， 健 康 检查 和 外 部 配置 。 
(6) 绝对 没有 代码 生成 和 对 XML 没有 要 求 配 置 。 


第 二 节 ”商品 维护 子 模块 设计 


一 、 商 品 维护 基本 流程 


商品 维护 主要 是 指 查找 商品 、 更 新 商品 和 删除 商品 。 
(1) 商品 查询 基本 流程 : 管理 
询 条 件 从 数据 库 中 


查询 商品 并 输出 。 
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(2) 商品 更 新 基本 流程 : 管理 员 输入 商品 信息 进行 查询 ;管理 员 修改 商品 信息 并 提 
交 ; 系统 根据 管理 员 提交 的 信息 从 数据 库 中 更 新 商品 信息 。 

(3) 商品 删除 基本 流程 : 管理 员 输 入 商品 的 相关 信息 ; 系统 根据 管理 员 提交 的 信息 从 
数据 库 中 删除 相关 商品 信息 。 


二 、 商 品 维护 主要 功能 实现 


(一 ) 商 品 维护 子 模块 持久 层 设计 
1. 接口 类 设计 
代码 如 下 : 


public interface IShopDao { 
// 查 询 所 有 商品 及 分 页 
public List<Shop> getShopPage (int currentPage,int pageSize); 
public int getShopTotal (); 
// 更 新 单个 产品 
public boolean updateBYPid(Shop shop); } 


2. 接口 实现 类 设计 
商品 接口 实现 类 ShopDaoImpl 位 于 com.qzmall.dao.impl 包 下 ， 该 类 提供 了 关于 表 shop 
的 查 、 删 、 改 功能 。 代 码 如 下 : 


public class ShopDaoImpl implements IShopDao { 
/* 


(1) 分 页 显示 所 有 商品 。 
该 方法 用 来 查询 表 shop 分 页 单位 内 商品 记录 功能 ， 以 请 求 页 号 和 每 页 记录 为 参数 ， 返 
回 结果 为 商品 集合 分 页 边界 类 型 。 代 码 如 下 : 


Bey 
Q@Override 
public List<Shop> getShopPage (int currentPage, int pageSize) { 
List<Shop> shops = new ArrayList<Shop>(); 

String strsql = "select subcate.sname as sname, shop.* from 
shop, subcate where shop.sid=subcate.sid order by shop.stock 
RSC ,shop.pid desc limit ?,2"; 

return (List<Shop>) DBUtil.executeQuery (strSsql, new 
IResultSetUtil() { 
Goverride 
public Object doHandler (ResultSet rs) throws SQLException { 
while (rs.next()) { 
Shop shop = new Shop(); 
SubCate subCate = new SubCate(); 
shop.setPid(rs.getInt ("pid")); 
subCate.setSname (rs.getstring ("sname")); 
shop.setsubCate (subCate); 
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shop .setShopname (rs.getstring ("shopname")); 
shop.setSshopinfo(rs.getstring ("shopinfo")); 
shop .setShopdate (rs.getstring ("shopdate")); 
shop.setstock (rs.getInt ("stock")); 
shop.setPrice(rs.getFloat ("price")); 
shop .setImagel (rs.getSstring ("imagel1")); 
shops.add (shop); 
} 
return shops; 
} 
}, (currentPage-1)*pageSize,pageSize); 
} 
/ 大 
(2) 查询 所 有 商品 数目 。 
该 方法 用 来 查询 表 shop 商品 记录 数 的 功能 ， 返 回 结果 为 整数 类 型 ， 表 示 记 录 数 。 代 码 
如 下 : 
村 尖 
@Override 
public int getShopTotal() { 
String strSql = "select count(*) from shop "; 
Object obj= DBUtil.executeQuery (strsql); 


return Integer.parseInt (obj.tostring()); 
. 
/* 
(3) 更 新 商品 信息 方法 。 
该 方法 用 来 实现 更 新 商品 表 shop 商品 信息 的 功能 ， 以 商品 实体 对 象 为 参数 ， 返 回 结果 
为 布尔 类 型 ， 表 示 更 新 商品 信息 是 否 成 功 。 代 码 如 下 : 
< 
@Override 
public boolean updateByPid(Shop shop) { 
String strSql = "update shop set 
shopname=?, shopinfo=?, price=?, cid=?, sid=?, description=? where pid=?2"; 
return DBUtil.executeUpdate (strSql，shop.getShopname () ， 
shop.getshopinfo(), shop.getPrice(), shop.getCategory() .getcid()， 
shop .getSubcate () .getsid(), shop.getDescription(), shop.getPid()) > 0; 


1 
} 


(二 ) 商 品 维护 子 模块 逻辑 层 设计 

1. 接口 类 设计 

接口 类 放 在 com.qzmall.service.IShopService 类 下 ， 接 口 类 设计 的 方法 与 持久 层 相 同 ， 
这 里 不 再 费 述 。 

2. 接口 实现 类 设计 

接口 类 方法 放 在 com.qzmall.service.impl.ShopServiceImpl 类 下 。 代 码 如 下 : 
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public class ShopServiceImpl implements IShopService { 
@Override 
public Shop getShopByid(int pid) { 


IShopDao shopDao=new ShopDaoImpl (); 


return shopDao.getShopByid (pid);} 
@Override 
public List<Shop> getShopPage (int currentPage, int pageSize) 
{IShopDao shopDao=new ShopDaoImp]l (); 
return shopDao .getShopPage (currentPage,pageSize);} 
@Override 
public int getShopTotal() { 


IShopDao shopDao=new ShopDaoImpl (); 


return shopDao.getShopTotal ();} 
@Override 
public boolean updateBYPid(Shop shop) { 


IShopDao shopDao=new ShopDaoImpl (); 


return shopDao.updateByPid(shop); } 


} 


(三 ) 商 品 维护 子 模块 控制 层 类 设计 


商品 管 


理 模 块 控 制 层 类 在 com.qzmall.servlet.shop 包 下 。 


1. 商品 列表 功能 设计 
E 员 从 menujsp 页 面 发 出 商品 维护 的 请 求 时 ， 系 统 就 会 交 给 BrowShopServlet 来 
处 理 ， 该 类 通过 调用 业务 逻辑 类 的 方法 getShopPage 来 实现 全 部 商品 分 页 展示 的 功能 。 具 
体 代码 如 下 : 


@WebsServlet (name = "BrowShopServlet",urlPatterns = "/admin/main.do") 
public class BrowShopServlet extends HttpServlet { 


当 管 理 


protected void doGet (HttpServletRequest req, HttpServletResponse resp) 


throw: 


s ServletException, IOException { 
String con = "商品 浏览 "; 
IShopService categoryService = new ShopServiceImpl (); 
ArrayList<Category> categoryArrayList = categoryService. 


getCategoryAll (); 


req.setAttribute ("categoryArrayList", categoryArrayList); 
try { 
int currentPage = Integer.parseInt (req.getParameter ("currentPage")); 
System.out .println ("CurrentPage="+currentPage); 
IShopService shopService = new ShopServiceImpl (); 
int totalSize = shopService.getShopTotal (); 
System.out .println ("totalsize="+totalSize); 
int totalPage = totalSize / Tally.SHOP PAGE SIZE; 
if (totalSize % Tally.SHOP PAGE SIZE != 0) 
totalPaget+t+; 
if (currentPage < 1) { 
currentPage = 1; 


if (currentPage > totalPage) { 
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currentPage = totalPage; 
} 
Pager page = new Pager (currentPage, totalsize); 
List<Shop> shopList = shopService .getShopPage (currentPage, 
Tally.SHOP PAGE SIZE); 
req.setAttribute ("con", con); 
req.setAttribute ("shopList", shopList); 
req.setAttribute ("page", page); 
String url = req.getRequestURI() + "?" req.getQuerystring(); 
System.out.println ("url=" + url); 
int index = url.1astIndexOf ("gcurrentPage="); 
if (index != -1) { url = url.substring(0,index); 
} 
System.out .println("urllast="” + url); 
req.setAttribute ("url", url); 
req.getRequestDispatcher ("main.jsp") .forward (req, resp); 
}catch (NumberFormatException ex){ 
String msg = "页 码 传 输 异常 "; 
req.setAttribute ("msg", msg); 
req.getRequestDispatcher ("result.jsp") .forward (req, resp); 
} 


【代码 说 明 】 

在 上 述 代码 中 ， 首 先 调用 categoryService.getCategoryAll0 得 到 所 有 分 类 对 象 categoryAmrayList， 
然后 把 它 传 回 主 页 面 mainjsp， 通 过 req 获取 显示 商品 页 码 currentPage， 通 过 调用 
shopService.getShopTotal0) 函 数 得 到 总 记录 数 totalSize， 并 根据 全 局 变量 TallySHOP PAGE SIZE 
得 到 总 页 数 totalPage， 最 后 调用 Page 类 shopService.getShopPage 方法 ， 得 到 page 和 shopList， 
一 并 传 回 main.jsp 页 面 。 


2. 编辑 浏览 商品 详细 信息 功能 设计 


当 管理 员 通 过 main.jsp 页 面 单 击 商 品 编号 就 会 交 给 类 EditShopServlet 进行 处 理 ， 该 类 
通过 调用 商品 业务 逻辑 类 方法 getShopByid， 来 实现 浏览 商品 详细 信息 功能 。 代 码 如 下 : 


@Webservlet (name = "EditShopServlet",urlPatterns = "/admin/editshop.do") 
public class EditShopServlet extends HttpServlet { 
protected void doGet (HttpServletRequest reqg, HttpServletResponse 
resp) throws ServletException, IOException { 
String con=" 商 品 编辑 "; 
req.setAttribute ("con", con); 
int pid=Integer.parseInt (req.getParameter ("pid")); 
IShopService shopService=new ShopServiceImpl (); 
ArrayList<Category> categoryArrayList=shopService.getCategoryAll (); 
Shop shop=shopService.getShopByid (pid); 
req.setAttribute ("shop", shop); 
req.setAttribute ("categoryArrayList",categoryArrayList); 
req.getRequestDispatcher ("editshop.jsp") .forward (req, resp); 
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3. 更 新 商品 功能 设计 


当 管 理 员 发 出 修改 商品 信息 的 请 求 后 ， 就 会 交 给 类 UpdateShopServlet 进行 处 理 ， 该 类 
首先 用 req 接收 表单 传 过 来 的 商品 字段 信息 ， 然 后 封装 这 些 信 息 于 商品 实体 类 Shop 中 ， 再 
通过 调用 商品 业务 罗 辑 类 方法 updateByPid 来 实现 商品 信息 更 新 功能 。 代 码 如 下 : 


Q@WebServlet (name = "UpdateShopServlet" ,urlPatterns = 
"/admin/updateshop.do") 
public class UpdateShopServlet extends HttpServlet { 
protected void doPost (HttpServletRequest req, HttpServletResponse 
resp) throws ServletException, IOException { 
ICategoryService categoryService=new CategoryServiceImp]l (); 
IShopService shopService=new ShopServiceImpl (); 
int pid=Integer.parseInt (req.getParameter ("pid")); 
String shopname=req.getParameter ("shopname"); 
String shopinfo=req.getParameter ("shopinfo"); 
int sid=Integer.parseInt (req.getParameter ("sid")); 
SubCate subCate=new SubCate(); 
subCate.setsid(sid); 
int cid=categoryService.getCcid(sid); 
Category category=new Category(); 
category.setCid(cid); 
float price=Float.parseFloat (req.getParameter ("price")); 
String description=req.getParameter ("description"); 
Shop shop=new Shop(); 
shop.setPid (pid); 
shop.setShopname (shopname); 
shop .setShopinfo (shopinfo); 
shop .setPrice (Price) 7 
shop.setCategory (category); 
shop.setsubCate (subCate); 
shop.setDescription (description); 
if (shopService.updateByPid(shop))t{ 
String msg=" 更 新 商品 信息 成 功 ! "; 
req.setAttribute ("msg",msg); 
req.getRequestDispatcher ("result.jsp") .forward (req, resp); 
}elsef{ 
String msg=" 更 新 商品 信息 失败 ! "; 
req.setAttribute ("msg",msg); 
req.getRequestDispatcher ("result.jsp") .forward (req, resp); 
} 


潍 往 汝 当代 会 借 片 十 此 兰 路 了 出 川 十 ] 厅 驯 洛 驯 男 几 


Se 


} 
(四 ) 商 品 维护 子 模块 视图 层 设计 
1. 商品 列表 显示 主页 面 (main.jsp) 设 计 
代码 如 下 : 
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<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title> 产 品 编辑 </title> 
<link type="text/css" rel="stylesheet" href="style/reset.css"> 
<link type="text/css" rel="stylesheet" href="style/main.css"> 
<script 
src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 
<script type="text/javascript"> 
function querysubcate(){ 
Var sid = $("#sid") .val(); 
location.href='adminQuerySubShop.do?sid="'+sid+'&currentPage=1"'; 
} 
$ (function(){ 
$(".jian") .click (function(){ 
var dd= $ (this) .attr ("id") .indexof ("jian") 
var pid=$ (this) .attr ("id") .substring(0,dd); 
Var quantity=$ ("#"+pid+"num") .val (); 
if (quantity==1) { 
alert ("采购 数量 不 能 低 于 1") 
return false; 
} 
$("#" + pid + "num") .val (Number (quantity)-1); 
条 二 
$(" .jia") .click(function(){ 
var dd= $(this) .attr("id") .indexof ("jia") 
var pid=$ (this) .attr ("id") .substring(0,dd); 
Var quantity=$ ("#"+pid+"num") .val (); 
if (Number (quantity)>50){ 
alert ("采购 数量 大 于 库存 ! ") 
return false; 
|; 
$("#" + pid + "num") .val (Number (quantity)+1); 
Ds 
}) 
</script> 
</head> 
<body> 
<jsp:include page="head.jsp"/> 
<div class="crumb"> 
<div class="Ww"> 
<div class="fl"> 
<a href="index.jsp" class="link">QZMAIL</a> 
<span>></span> 
<span class="link-text">${con}</span> 
</div> 
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<div class="fr"> 
<a href="exit.do" class="link"> 退 出 </a> 
</div> 
</div> 
</div> 
<div class="w"> 
<jsp:include page="menu.jsp"/> 
<div class="content"> 
<div class="content-con"> 
<form action="adminQueryShop.do" method="get" > 
<input type="text" value="" name="shopname" class="search"> 
<input class="currentPage" id="currentPage" 
name="currentPage" value="1" type="hidden"/> 
<input type="submit" class="btn search-btn" id="search- 
btn" value=" 搜 索 "></input> 
</form> 
<span class="text"><a class="link" href="main.do?&currentPage=1"> 
全 部 商品 </a></span> 
<span class="text"> 商 品 分 类 : </span><select name="sid" id="sid" 
class="select" onchange="querysubcate();"> 
<option value="" selected="selected">== 请 选择 2 级 分 类 ====</option> 
<c:forEach items="$ {categoryArrayList}" var="category"> 
<optgroup label="$ {category.cname}"> 
<c:forEach items="${category.subCates}" var="sname"> 
<c:if est="${category.cid==sname.category.cid}"> 
<option value="${sname.sid}"> Ls{sname.sname}</option> 
</CsLE> 
</c:forEach> 
</optgroup> 
</c:forEach> 
</select> 
</div> 
<form action="addstockItem.do" method="post"> 
<table class="table" cellspacing="0" cellpadding="0"> 


<thead> 

<ErS 
<th width="10%"> 选 择 </th> 
<th wi 15%"> 商 品名 称 </th> 
<th 15%"> 商 品 图 片 </th> 
<th 15%"> 商 品类 别 </th> 


<th width="10%"> 市 场 价 </th> 
<th width="10%"> 库 存 </th> 
<th width="25%"> 操 作 </th> 
</tr> 
</thead> 
<tbody> 
<c:forEach items="${shopList}" var="shop"> 
EXK> 
<td width="80px"><input value="${shop.pid}" 
name="checkboxBtn" type="checkbox"/></td> 
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<td width="120px"><a class="link" href= "editShop .do?pid= 
${shop.pid}">${shop.shopname}</a></td> 
<td width="120px"><img src="<c:url 
value="'../img/pic/${shop.imagel}'/>" width="80" height="80" ></td> 
<td width="120px">${shop.subCate.sname}</td> 
<td width="80px">$ {shop.price}</td> 
<td width="80px">$ {shop.stock}</td> 
<td width="200px"><a class="link" href="deleShop.do?pid= 
${shop.pid}"” onClick="return confirm(' 您 确定 进行 删除 操作 吗 ?') "> 删除 </a> 
<a class="link" href="stockItemByPid.do?pid= 
${shop.pid}&currentPage=1"> 库 存 明细 </a></td> 
Htr> 
</c:forEach> 
</tbody> 
</table> 
<div class="stock"><input type="submit" class="btn" value=" 增 加 库 
存 "></div> 
</form> 
<div class="pg-content"> 
<form class="page-form" method="post" action="${url}" > 
<input type="text" name="currentPage" class="page" > 
<input type="submit" value="go" > 
</form> 
<c:if test="${page.hasFirst}"> 
<li><a href="${url}&currentPage=1"> 首 页 </a></1i> 
< 
<c:if test="${page.hasPrevious}"> 
<li><a href="${url}&currentPage=$ {page.currentPage-1}"> 上 一 页 </a></1i> 
< > 
<c:if test="${page.hasNext}"> 
<1i><a href="${url}&currentPage=$ {page.currentPage+1}"> 下 一 页 /a></1i> 
</EXLE> 
<c:if test="${page.hasLast}"> 
<li><a href="$ {url}&currentPage=${page.totalPage}"> 尾 页 </a></1i> 
We 
<span class="pg-total"> 当 前 第 ${page.currentPage} 页 ， 总 共 
${page.totalPage} 页 </span> 
</div> 
<!-- 分 页 结束 --> 
</div> 
</div> 
<jsp:include page="foot.jsp"/> 
</body> 
</html> 


【代码 说 明 】 
此 页 面 是 后 台 管 理 的 主页 面 ， 主 要 包括 以 下 几 个 方面 的 功能 。 
(1) 显示 全 部 商品 。 通 过 main.do 命令 调用 BrowShopServlet 类 ， 用 JSTL 标签 遍历 返 
对 象 shoplist.page 来 完成 此 功能 。 


后 台 维护 模块 设计 


第 八 章 


(2) 模糊 查询 商品 。 通 过 adminQueryShop.do 调用 AdminQueryShopServlet 类 ， 用 


JSTL 标签 遍历 返回 对 象 shoplistpage 来 完成 此 功能 。 


(3) 查询 某 一 子 类 商品 。 通 过 jQuery 的 方法 querysubcate0 调 用 AdminQuerySubShopServlet 


类 ， 用 JSTL 标签 遍历 返回 对 象 shoplistpage 来 完成 此 功能 。 运 行 效果 如 图 8-2 所 示 。 
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2. 商品 编辑 页 面 (editshop.jsp) 设 计 
代码 如 下 : 


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 
<!DOCTYPE html> 
<html> 
<head> 

<meta charset="UTF-8"> 

<meta http-equiv="X-UA-Compatible" content="ie=edge"> 

<title> 商 品 编辑 </title> 

<link type="text/css" rel="stylesheet" href="style/reset.css"> 

<link type="text/css" rel="stylesheet" href="style/addshop.css"> 
<script src="https://libs.baidu.com/jquery/2.1.4/ 
jquery.min.js"></script> 

<script type="text/javascript" src="js/addshop.js"></script> 
</head> 
<body> 
<jsp:include page="head.jsp"/> 
<div class="crumb"> 

<div class="w"> 

<div class="fl"> 
<a href="index.jsp" class="]ink">QZMAIL</a> 


<span>></span> 
<span class="link-text">${con}</span> 
</div> 
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<div class="fr"> 
<a href="exit.do" class="link"> 退 出 </a> 
</div> 
</div> 
</div> 
<div class="w"> 
<jsp:include page="menu.jsp"/> 
<div class="content"> 
<div class="content-con"> 
<span class="text"> 编 辑 商 品 </span> 
</div> 
<form action="updateshop.do?pid=${shop.pid}" onSubmit="javascript: 
return sendreg();" method="post" id="form"> 
<div class="shop-con"> 
<ul> 
<1i><span class="label"> 商 品 品 牌 : </span><span 
class="con"><input id="shopname" type="text" name="shopname" 
value="${shop.shopname}" /></span></1i> 
<1i><span class="label"> 商 品 信息 : </span><span 
class="con"><input id="shopinfo" type="text" name="shopinfo" 
value="${shop.shopinfo}" style="width:200px;" /></span></1i> 
<1i><span class="label"> 选 择 分 类 : </span> <span class="con"> 
<select name="sid" id="sid"> 
<c:forEach items="${categoryArrayList}" var="category"> 
<optgroup label="$ {category.cname}"> 
<c:forEach items="${category.subCates}" var="sname"> 
<c:if test="${category.cid==sname.category.cid}"> 
<c:if test="${shop.subCate.sid==sname.sid}"> 
<option value="${sname.sid}" selected="selected"> 
Ls{sname.sname} </option> 
过 /CS 下 > 
<option value="$fsname.sid}j"> L 一 
${sname.sname}</option> 
EUE> 
</c:forEach> 
</optgroup> 
</c:forEach> 
</select></span> 
</1i> 
< 
<span class="1label"> 商 品 售 价 : </span> <span 
class="con"><input id="price" type="text" name="price" 
value="${shop.price}" /></span> 
</1i> 
<li><span style="vertical-align: top;font-size:14px; "> 
商品 详情 : </span> <span class="con"><textarea rows="5" cols="40" 
wrap="hard" name="description" >${shop.description} 
</textarea> </span></1i> 
</ul> 
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<div class="add-btn"><input type="submit" id="btn" 


class="btn" value=" 提 交 "/></div> 


</div> 


</form> 
</div> 


</div> 


<jsp:include page="foot.jsp"/> 


</body> 
</html> 


【代码 说 明 】 

此 页 面 是 根据 商品 id 查找 某 一 商品 的 详细 信息 ， 通 过 EditShopServlet 返回 shop 对 象 
来 遍历 商品 信息 ， 通 过 EditShopServlet 返回 的 categoryArrayList 来 遍历 商品 分 类 信息 。 另 
外 ， 根 据 这 个 页 面 数据 对 商品 信息 进行 编辑 修改 ， 此 页 面 的 难点 在 于 能 够 正确 显示 所 选 商 
品 的 分 类 ， 在 此 基础 上 ， 还 能 动态 选择 商品 分 类 并 进行 商品 信息 修改 。 商 品 编辑 页 面 运 行 
效果 如 图 8-3 所 示 。 


糙 


图 8-3 ”商品 编辑 页 面 (editshop.jsp) 


课堂 技能 训练 : 


【 实 训 操作 内 容 】 完 成 后 台 的 商品 更 新 功能 。 
【 实 训 操作 步骤 】 

(1) 持久 层 设计 (重点 )。 

(2) 业务 逻辑 层 设计 。 


(3) 控制 


(4) 视图 


层 设计 。 
层 设计 。 


小 提示 : Eclipse 平 台 
Eclipse 是 一 个 开放 源 代码 的 、 基 于 Java 的 可 扩展 开发 平台 。Eclipse 既 包 括 作为 Java 
集成 开发 环境 (IDE) 来 使 用 ， 还 包括 插件 开发 环境 (Plug-in Development Environment， 
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PDE)， 这 个 组 件 主要 针对 希望 扩展 Eclipse 的 软件 开发 人 员 ， 因 为 它 允 许 用 户 构建 与 
Eclipse 环境 无 颖 集成 的 工具 。 由 于 Eclipse 中 的 每 样 东西 都 是 插件 ， 对 于 给 Eclipse 提供 
插件 ， 以 及 给 用 户 提供 一 致 和 统一 的 集成 开发 环境 而 言 ， 所 有 工具 开发 人 员 都 具有 同等 的 
发 挥 场所 。 


第 三 节 ”用户 订 单 后 台 维 护 子 模块 设计 


一 、 用 户 订 单 维护 基本 流程 


订单 浏览 基本 流程 : 管理 员 登 录 ; 浏览 所 有 已 付 tg 
订单 查询 基本 流程 管理 员 输 入 查询 条 件 并 提交 查询 ， 系 统 根据 管理 员 提 交 的 查询 条 
件 从 数据 库 中 查 出 相关 订单 信 息 。 


订单 状态 修改 基本 流程 : 管理 员 输 入 查询 条 件 ， 从 中 选择 某 一 订单 ， 进入 订单 明细 ; 
修改 订单 状态 并 提交 。 
二 、 用 户 订单 后 台 维 护 功能 实现 
(一 ) 用 户 订单 后 台 维 护 子 模块 持久 层 设计 
1. 接口 类 设计 
代码 如 下 : 


public interface IOrdersDao { 


// 已 付款 订单 


public List<Orders> allOrders (int currentPage, int pagesSize); 
public int getAllOrdersTotal (); 
[ 


2. 接口 实现 类 设计 
代码 如 下 : 


public class OrderDaoImpl implements IOrdersDao { 

/* 

(1) 该 方法 用 来 实现 分 页 查询 订单 表 orders 订单 状态 大 于 1 的 所 有 订单 ， 以 请 求 页 码 
和 每 页 记录 数 为 参数 ， 返 回 结果 为 分 页 边界 类 型 。 具 体 代 码 如 下 : 


本 区 
@Override 
public List<Orders> allOrders (int currentPage, int pageSize) 
{ List<Orders> orders = new ArrayList<Orders>(); 

String strSql = "select * from orders where state>]1 order by state 
ASC Timit gos 

return (List<Orders>) DBUtil.executeQuery (strSsql, new IResultSetUtil() 
{ 
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@Override 
public Object doHandler (ResultSet rs) throws SQLException { 
while (rs.next()) { 

Orders ordersl = new Orders(); 
ordersl.setUsername (rs.getstring ("username")); 
ordersl.setTruename (rs.getstring ("truename")); 
ordersl.setOrderId(rs.getstring ("orderId")); 

ordersl.setPhone (rs.getstring ("phone")); 

ordersl.setSum(rs.getFloat ("sum")); 

Orders1.setState (rs.getInt ("state")); 

ordersl .setAddtime (rs.getstring ("addtime")); 

orders.add (orders1); 

} 
return orders; 
} 
}, (currentPage - 1) * pageSize, pageSize); 
} 
Qoverride 
/* 
(2) 该 方法 用 来 实现 分 页 查询 订单 表 orders 订单 状态 大 于 1 的 所 有 订单 数量 ， 返 回 结 
果 为 整数 类 型 。 具 体 代码 如 下 : 
a 
public int getAllOrdersTotal() { 
String strSql = "select count (*) from orders where state>1 "7 


Object obj= DBUtil.executeQuery(strSql1) 7 
return Integer.parseInt (obj .toString()) 7 


} 
(二 ) 用 户 订单 后 台 维 护 子 模块 逻辑 层 设计 
1. 接口 类 设计 


接口 类 放 在 com.qzmall.service.IOrderService 类 下 ， 接 口 类 设计 的 方法 与 持久 层 相 同 ， 
这 里 不 再 歼 述 。 


2. 接口 实现 类 设计 
代码 如 下 : 


public class OrdersServiceImpl implements IOrdersService { 
@Override 
public List<Orders> allorders (int currentPage, int pageSize) 
{IOrdersDao ordersDao=new OrderDaoImpl (); 
return ordersDao.allOrders (currentPage, pageSize); } 
@Override 
public int getAllOrdersTotal() { 
IOrdersDao ordersDao=new OrderDaoImpl (); 
return ordersDao.getAllOrdersTotal ();} 
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(三 ) 用 户 订 单 后 台 维 护 控制 层 设计 
1. 查询 所 有 已 付款 订单 
当 管 理 员 在 leftjsp 页 面 发 出 订单 管理 的 请 求 后 ， 就 会 交 给 AdminAllOrdersServlet 来 进 


行 处 理 ， 该 类 通过 调用 Page 类 ， 以 及 商品 业务 逻辑 类 的 getAllOrdersTotal、allOrders 方法 
来 实现 查询 所 有 已 付款 的 订单 的 功能 。 代 码 如 下 : 


QWebServlet (name = "AdminAllOrdersServlet",urlPatterns = 
"/admin/adminAllOrders .do") 
public class AdminAllOrdersServlet extends HttpServlet { 
protected void doPost (HttpServletRequest req, HttpServletResponse 
resp) throws ServletException, IOException { 
doGet (req, resp);} 
protected void doGet (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
String con = "已 付款 订单 "; 
Ey 
int currentPage = 
Integer.parseInt (req.getParameter ("currentPage")); 
System.out.println ("CurrentPage="+currentPage); 
IOrdersService ordersService = new OrdersServiceImpl (); 
int totalSize = ordersService.getAllOrdersTotal (); 
System.out .println("totalsize="+totalSize) 7 
int totalPage = totalSize / Tally.SHOP PAGE SIZE; 
if (totalSize % Tally.SHOP PAGE SIZE != 0) 
totalPaget++; 
if (currentPage < 1) { 
currentPage = 1; 
} 
if (currentPage > totalPage) { 
currentPage = totalPage; 
} 
Pager page = new Pager(currentPage, totalsize); 
List<Orders> ordersInfo = ordersService.allOrders (currentPage, 
Tally.SHOP PAGE SIZE); 
req.setAttribute ("con", con); 
req.setAttribute ("ordersInfo", ordersInfo); 
req.setAttribute ("page", page); 
String Url = req.getRequestURI() + "?" + req.getQuerystring(); 
System.out .println("url=" + url); 
int index = url.lastIndexOof ("gcurrentPage="); 
if (index = 
url = url.substring (0, index); 


} 

System.out .println("urllast=" + url); 

req.setAttribute ("url", url); 

req.getRequestDispatcher ("adminOrders.jsp") .forward (req, resp); 


}catch (NumberFormatException ex){ 
String msg = "页 码 传输 异常 "; 
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req.setAttribute ("msg", msg); 
req.getRequestDispatcher ("result.jsp") .forward (req, resp); 


2. 根据 订单 编号 查询 订单 功能 设计 

当 管理 员 在 adminOrdersjsp 页 面 发 出 查询 订单 编号 的 请 求 后 ， 就 会 交 给 AdminOneOrdersServlet 
来 进行 处 理 ， 该 类 通过 调用 getOrdersByOrderId 返回 查询 结果 orders， 然 后 把 它 传 回 
adminOneOrders.jsp 页 面 。 代 码 如 下 : 


@WebServlet (name = "AdminOneOrdersServlet",urlPatterns = 
"/admin/adminQueryOrderId.do") 
public class AdminOneOrdersServlet extends HttpServlet { 
protected void doPost (HttpServletRequest req, HttpServletResponse 
resp) throws ServletException, IOException { doGet (req,resp); } 
protected void doGet (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
String orderId=req.getParameter ("orderId"); 
if (orderId!="" && orderId!=null){ 
IOrdersService ordersService=new OrdersServiceImpl (); 
Orders orders=ordersService.getOrdersByOrderId (orderId); 
req.setAttribute ("orders",orders); 
req.getRequestDispatcher ("adminOneOrders.jsp") .forward (req, resp); 
} 
else{ 
String msg=" 订 单 编号 不 能 为 空 ! "; 
req.setAttribute ("msg",msg); 
req.getRequestDispatcher ("result.jsp") .forward (req, resp); 
上 


} 
3. 根据 订单 编号 查询 订单 明细 功能 设计 


当 管 理 员 在 adminOrdersjsp 页 面 发 出 订单 明细 的 请 求 后 ， 就 会 交 给 
AdminOrdersListServlet 来 进行 处 理 ， 该 类 通过 调用 getOrdersByOrderId 返回 查询 结果 
orders， 然 后 把 它 传 回 adtminOrdersListjsp 页 面 。 代 码 如 下 : 


@WebsServlet (name = "AdminOrdersListservlet",urlPatterns = 
"/admin/adminordersList.do") 
public class AdminOrdersListServlet extends HttpServlet { 
protected void doPost (HttpServletRequest req, HttpServletResponse 
resp) throws ServletException, IOException { doGet (reqg,resp);} 
protected void doGet (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
String orderId=req.getParameter ("orderId"); 
IOrdersService ordersService=new OrdersServiceImpl(); 
Orders orders=ordersService.getOrdersByOrderId (orderId); 
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List<OrdersItem> 
ordersItemList=ordersService.getOrdersItemByOrderId (orderId); 

req.setAttribute ("orders",orders); 

req.setAttribute ("ordersItemList",ordersItemList); 


req.getRequestDispatcher ("adminOrdersList.jsp") .forward (req, resp); 


} 


4. 更 新 订单 状态 功能 设计 
当 管 理 员 在 adminOrdersListjsp 页 面 发 出 更 新 订单 状态 的 请 求 后 
AdminUpdateOrderStateServlet 来 进行 处 理 ， 实 现 订单 状态 的 更 新 。 代 码 如 下 : 


@WebServlet (name = "AdminUpdateOrderstateServlet",urlPatterns 
"/admin/adminUpdateOrderstate.do") 
public class AdminUpdateOrderStateServlet extends HttpServlet 


{ 


protected void doPost (HttpServletRequest req, HttpServletResponse 


resp) throws ServletException, IOException { 
String orderId = req.getParameter ("orderId"); 
if (states==null ||"".equals (states)){ 
String msg = "订单 状态 未 做 任何 改变 "; 
req.setAttribute ("msg", msg); 
req.getRequestDispatcher ("result.jsp") .forward(req, re 
} 
int state=Integer.parseInt (states); 
Orders orders = new Orders(); 
orders .setOorderId (orderId) ; 
Orders .setState (state) 
IOrdersService ordersService = new OrdersServiceImp]l (); 
if (ordersService.updateOrdersstate(orders)) { 
IShopService shopService = new ShopServiceImpl (); 


sp); 


List<OrdersItem> ordersItemList = new ArrayList<OrdersItem> () 7 
ordersItemList = ordersService.getOrdersItemByOrderId (orderId); 


Iterator iter = ordersItemList.iterator(); 
while (iter.hasNext()) { 
OrdersItem ordersItem= (OrdersItem)iter.next (); 
int shopnum = ordersItem.getShopnum(); 
int pid=ordersItem.getPid(); 
StockItem stockItem = new StockItem(); 
stockItem.setPid (pid); 
stockItem.setNum(-shopnum); 
stockItem.setstockTime (StringHelper.getCurrentFormatDate () ) ; 
stockItem.setDescription (" 卖 出 商品 ") ; 
shopService.addstock (stockItem); 
} 
String msg = "修改 订单 状态 成 功 , 并 相应 减少 库存 "”; 
req.setAttribute ("msg", msg); 
req.getRequestDispatcher ("result.jsp") .forward (req, resp); 
} 
elsef 


String msg=" 修 改 订单 状态 未 成 功 "; 
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req.setAttribute ("msg",msg); 


req.getRequestDispatcher ("result.jsp") .forward (req, resp); 


} 
} 


protected void doGet (HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { doPost (req,resp);} 


【代码 说 明 】 


(1) 
(2) 
G3) 


运用 req 对 象 接收 订单 状态 和 订单 编号 ， 然 后 封装 到 订单 实体 类 对 象 (orders) 中 。 


管理 员 修 改 状 态 就 一 种 ， 由 订单 状态 2( 已 付款 订单 ) 改 为 订单 状态 3( 已 发 货 )。 
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当 管 理 员 发 出 改变 订单 状态 的 请 求 时 ， 调 用 业务 轴 辑 类 updateOrdersState(orders) 


方法 ， 进 行 订单 状态 更 新 ， 如 果 返 回 值 为 真 ， 此 时 的 订单 状态 更 新 为 “已 发 货 ”， 所 以 还 


要 从 库存 表 相 应 减少 订单 中 所 包含 商品 的 库存 数量 。 这 时 还 要 调 月 


目 商 品 业 务 逻 辑 类 方法 


shopService.addstock(stockItem)， 在 库存 表 中 增加 商品 库存 记录 ， 因 为 库存 减少 意味 着 现 库 
存量 减 去 原 库存 量 所 得 值 为 负数 ， 所 以 在 封装 库存 实体 类 时 代码 应 写成 : stockItem.setNum (- 


shopnumy)。 
(四 ) 用 户 订单 后 台 维 护 子 模块 视图 层 设计 
1. 显示 所 有 已 付款 订单 页 面 (adminOrders.jsp) 设 计 
代码 如 下 : 


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" $%> 
<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 
<!DOCTYPE html> 

<html> 

<head> 


<meta charset="UTF-8"> 

<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title> 订 单 编辑 </title> 

<link type="text/css" rel="stylesheet" href="style/reset.css"> 
<link type="text/css" rel="stylesheet" href="style/main.css"> 
<script 


src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 
</head> 

<body> 

<jsp:include page="head.jsp"/> 

<div class="crumb"> 


<div class="w"> 
<div class="fl1"> 
<a href="index.jsp" class="]link">QZMAIL</a> 
<span>></span> 
<span class="link-text">${con}</span> 
</div> 
<div class="fr"> 
<a href="exit.do" class="link"> 退 出 </a> 
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</div> 
</div> 
</div> 
<div class="w"> 
<jsp:include page="menu.jsp"/> 
<div class="content"> 
<div class="content-con"> 
<form action="adminQueryOrderId.do" method="get" > 
<label class="label"> 订 单 编号 : </label> <input type="text" 
value="” name="orderId” class="search"> 
<input type="submit" class="btn search-btn" id="search-btn" 
value=" 搜 索 "></input> 
</form> 
<span class="text"><a href="adminAllOrders.do?currentPage=1" 
class="1ink"> 全 部 订单 </a></span> 
</div> 
<table class="table" cellspacing="0" cellpadding="0"> 
<thead> 
<tr> 
<th width="140pzx"> 订 单 编号 </th> 
<th width="120px"> 真 实 姓名 </th> 
<th wi 100px"> 手 机 </th> 
<th 80px"> 人 金额 </th> 
<th width="160px"> 时 间 </th> 
<th width="80px"> 状 态 </th> 
<th width="120pxn> 操 作 </th> 
</tr> 
</thead> 
<tbody> 
<c:forEach items="${ordersInfo}" var="orders"> 
<tr> 
<td width="140px">$ {orders.orderId}</td> 
<td width="120px">${orders.truename}</td> 
<td width="100px">$ {orders.phone}</td> 
<td width="80px">$ {orders.sum}</td> 
<td width="160px">$ {orders.addtime}</td> 
<td width="80px"> 
<c:if test="${orders.state==1}"> 未 付款 </c:if> 
<c:if test="${orders.stat }"> 已 付款 </c:if> 
<c:if test="${orders.state 和 > 已 发 贷 <7E3EE> 
<c:if test="${orders.state==4}"> 订 单 完 成 </c:if> 
</td> 
<td width="120px"><a class="1ink"” href="adminOrdersList.do? 
orderId=${orders.orderId}"> 订 单 明 细 </a></td> 
<HEr> 
</c:forEach> 
</tbody> 
</table> 
<div class="pg-content"> 
<form class="page-form" method="post" action="${url}" > 
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<input type="text" name="currentPage" class="page" > 
<input type="submit" value="go" > 

</form> 

<c:if test="${page.hasFirst}"> 
<li><a href="${url}&currentPage=1"> 首 页 </a></1i> 

</c:if> 

<c:if test="${page.hasPrevious}"> 

<li><a href="${url}&currentPage= 
${page.currentPage-1}"> 上 一 页 </a></1i> 

< 

<c:if test="${page.hasNext}"> 
<li><a href="$ {url}&currentPage= 
${page.currentPage+1}"> 下 一 页 </a></1i> 

/rE 

<c:if test="${page.hasLast}"> 
<li><a href="$ {url}&currentPage= 

${page.totalPage}"> 尾 页 </a></1i> 
et 
<span class="pg-total"> 当 前 第 ${page.currentPage} 页 ， 总 共 


${page.totalPage} 页 </span> 
</div> 


<!-- 分 页 结束 --> 


</div> 


</div> 


<jsp:include page="foot.jsp"/> 


</body> 
</html> 


【代码 说 明 】 

该 页 面 显示 的 是 所 有 已 付款 订单 ， 并 进行 分 页 显示 ， 该 页 面 接收 AdminAllOrdersServlet 
传 回 的 分 页 集合 对 象 ordersInfo、 分 页 容器 对 象 page 及 地 址 栏 变量 url， 通 过 JSTL 标签 进 
行 遍 历 解析 ， 把 内 容 显示 到 当前 页 面 上 ， 运 行 效果 如 图 8-4 所 示 。 


QZMALL 奉 职 电子 商务 后 台 管理 系统 
管理 员 : admin 
ms: 
mS 直 实 姓名 3 和 全 而 时 间 状态 扬 作 

1517208045168604 | fanxingchang | 15383982053 | 139980 | 2018-01-29024045 EL 

1517208131470918 | zhoushanshan | 18932579875 | 72960 2018-01-29 0242:11 Escd 时 

1517208213036718 王 月 丹 18932579875 | 157990 | 2018-01-29 024333 Esc 香 明 型 

口 四 总 车 页 


图 84 所 有 已 付款 订单 


2. 查询 单个 订单 页 面 (adminOneOrders.jsp) 设 计 


代码 如 下 : 
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<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title> 订 单 维护 </title> 
<link type="text/css" rel="stylesheet" href="style/reset.css"> 
<link type="text/css" rel="stylesheet" href="style/main.css"> 
<script 
src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 
</head> 
<body> 
<jsp:include page="head.jsp"/> 
<div class="crumb"> 
<div class="w"> 
<div class="fl"> 
<a href="index.jsp" class="link">QZMAIL</a> 


<span>></span> 
<span class="link-text">$ {con}</span> 
</div> 


<div class="fr"> 
<a href="exit.do" class="link"> 退 出 </a> 
</div> 
</div> 
</div> 
<div class="w"> 
<jsp:include page="menu.jsp"/> 
<div class="content"> 
<div class="content-con"> 
<form action="adminQueryOrderId.do" method="get" > 
<label class="label"> 订 单 编号 : </label> <input type="text" 
value="" name="shopname" class="search"> 
<input type="submit" class="btn search-btn" id="search-btn" 
value=" 搜 索 "></input> 
</form> 
<span class="text"><a href="adminAllOrders.do?currentPage=1"> 全 
部 订单 </a></span> 
</div> 
<table class="table" cellspacing="0" cellpadding="0"> 
<thead> 
<Ezs 
<th width="15%"> 订 单 编号 </th> 
<th width="15%"> 真 实 姓名 </th> 
<th width="10%"> 手 机 </th> 
<th wiqth="10%"> 金 额 </th> 
<th width="15s"> 时 间 </th> 
<th width="10s"> 状 态 </th> 
<th width="25s"> 操 作 </th> 
<XET> 
</thead> 
<tbody> 
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ET 
<td width="15%">$ {orders.orderId}</td> 
<td width="15%">${orders.truename}</td> 
<td width="15%">${orders.phone}</td> 
<td width="10%">${orders.sum}</td> 
<td width="15%">${orders.addtime}</td> 
<td width="10%"><c:if test="${orders.state==1}"> 未 付款 
We 
<c:if test="${orders.state==2}"> 已 付款 </c:if> 
<c:if test="${orders.state==3}"> 已 发 货 </c:if> 
<c:if test="${orders.state==4}"> 订 单 完 成 </c:if> 
</td> 
<td width="20%"><a class="link" 
href="adminOordersList.do?orderId=${orders.orderId}"> 订 单 明细 </a></td> 


</tr> 
</tbody> 
</table> 
</div> 

</div> 

<jsp:include page="foot.jsp"/> 
</body> 

</html> 

【代码 说 明 】 


该 页 面 显示 的 是 某 一 订单 编号 的 列表 信息 ， 该 页 面 接收 AdminOneOrdersServlet 传 回 
的 订单 主 表 实体 类 对 象 orders， 通 过 EL 标签 进行 遍历 解析 ， 把 内 容 显示 到 当前 页 面 上 ， 
运行 效果 如 图 8-5 所 示 。 


QZMALL 秦 职 电子 商务 后 台 管 理 系 统 


RS 再 全 部 订单 


钊 六 和 了 机 全 Na #6 扎 作 


2018-01-29 
1517208045168504 fanxingchang | 15383962053 | 13958D Emp 
D24045 


图 8-5 查询 某 一 订单 编号 结果 
3. 订单 明细 页 面 (adminOrdersListjsp) 设 计 
代码 如 下 : 


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ page contentType="text/html;charset=UTF-8" language="java" $%> 
<!DOCTYPE html> 

<html> 
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<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title> 产 品 编辑 </title> 
<link type="text/css" rel="stylesheet" href="style/reset.css"> 
<link type="text/css" rel="stylesheet" href="style/main.css"> 
<script 
src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 
</head> 
<body> 
<jsp:include page="head.jsp"/> 
<div class="crumb"> 
<div class="w"> 
<div class="f]l"> 
<a href="index.jsp" class="link">QZMAIL</a> 


<span>></span> 
<span class="link-text">${con}</span> 
</div> 


<div class="fr"> 
<a href="exit.do" class="1link"> 退 出 </a> 
</div> 
</div> 
</div> 
<div class="w"> 
<jsp:include page="menu.jsp"/> 
<div class="content"> 
<div class="panel"> 
<div class="panel-title"> 修 改 订单 状态 </div> <span 
id="spanl2">$ {resu}</span> 
<form name="forml" method="post" action="adminUpdateOrderstate.do" > 
<div class="panel-body"> 
<div class="form-line"> 
<span class="label"> 收 货 人 : </span> 
<span class="text">${orders.truename}</span> 
<input id="orderId" name="orderId" value="${orders.orderId}" 
type="hidden" readonly="true"/> 
&nbsp; gnbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; gnbsp; <span class="label"> 手 gnbsp; &nbsp; 机 : </span> 
<span class="text">$ {orders.phone}</span> 
</div> 
<div class="form-line"> 
<span class="label"> 地 gnbsp; gnbsp; 址 : </span> 
<span class="text">${orders.address}</span>gnbsp; 
<span class="label"> 邮 &nbsp; &gnbsp; 编 : </span> 
<span class="text">${orders.postcode}</span> 
</div> 
<div class="form-line"> 
<span class="label"> 金 enbsp; gnbsp; 额 : </span> 
<span class="text"><input type="text" id="sum" name="sum" 
value="$ {orders.sum}" readonly="true"></span> 
<span class="label"> 状 &nbsp; gnbsp; 态 : </span> 
<span class="text”"><select name=—"state”> 
<c:if test="${orders.state==1}"> 
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<option value="l" selected="selected" disabled="disabled"> 未 付款 </option> 
<option value="2" selected="selected" disabled="disabled"> 已 付款 </option> 


x /ees 
<c:if test="${orders.state==2}"> 
<option value="2" selected="selected" disabled="disabled"> 客 户 已 付款 
</option> 
<option value="3" > 商家 已 发 货 </option> 
CE 
<c:if test="$forders .state==3}"> 
<option value="3" selected="selected" disabled="disabled"> 商 家 已 发 货 
</option> 
<option value="4" disabled="disabled"> 用 户 已 收 货 </option> 
</e:1£> 
<c:if test="${orders.state==4}"> 
<option value="4" selected="selected" disabled="disabled"> 用 户 已 收 货 
</option> 
We 
</select></span> 
</div> 
<div class="form-line"> <span class="text"><input 
class="btn btn-con" type="submit" value=" 提 交 "></span> 
</div> 
</div> 
<div class="panel-body"> 
<table class="table" cellspacing="0" cellpadding="0"> 
<thead> 
Er 
<th width="20%"> 订 单 编号 </th> 
<th width="20%"> 商 品 编号 </th> 
<th width="20%"> 商 品名 称 </th> 
<th width="20%"> 数 量 </th> 
<th width="20%"> 价 格 </th> 
人 > 
</thead> 
<tbody> 
<c:forEach items="${ordersItemList}" var="item"> 
<tr> 
<td width="20%">${item.orderId}</td> 
<td width="20%"><input name="pid" value="${item.pid}" readonly="true"/> 
</td> 
<td width="20%"><input name="shopname" value="${item.shopname}" 
readonly="true"/> </td> 
<td width="20%"><input name="shopnum" value="${item.shopnum}" 
readonly="true"/> </td> 
<td width="20%">${item.price}</td> 
</tr> 
</c:forEach> 
</tbody> 
</table> 
</div> 
</form> 
</div> 
</div> 
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</div> 

<jsp:include page="foot.jsp"/> 
</body> 

</html> 


【代码 说 明 】 
该 页 面 接收 AdminOrdersListServlet 传 回 的 订单 主 表 实体 类 对 象 order 和 订单 明细 集合 


类 ordersItemList， 通 过 EL 和 JSTL 标签 进行 遍历 解析 ， 把 某 一 订单 编号 的 内 容 显示 到 当 
前 页 面 上 ， 运 行 效果 如 图 8-6 所 示 。 


QZMALL 秦 职 电子 商务 后 台 管 理 系统 


人 aR: admin 


my 


手机 :15383982053 
邮 纺 : 066004 


次 恋 : 。 商家 已 发 册 ” 


1517208045168604 9 已 1 129990 


1517208045168604 30 4 洒 于 机 1 9990 


图 8-6 订单 明细 页 面 
当 我 们 改变 订单 状态 ， 更 改 为 “商家 已 发 货 ” 时 ， 单 击 “ 提 交 ” 按 钮 ， 出 现 如 图 8-7 


所 示 的 页 面 ， 表 示 订 单 状态 修改 成 功 。 


QZMALL 奉 职 电子 商务 后 台 管理 系统 


修改 订单 状态 成 功 ,并 相应 减少 库存 


图 8-7 修改 订单 状态 成 功 


课堂 技能 训练 : 


【 实 训 操作 内 容 】 完 成 后 台 订单 维护 功能 。 

【 实 训 操作 步骤 】 

(1) 持久 层 设 计 。 

(2) 业务 逻辑 层 设计 。 

(3) 控制 层 设计 。 

(4) 视图 层 设计 。 

要 求 : 能 够 显示 所 有 已 付款 订单 列表 ， 查 询 订单 ， 以 及 修改 订单 状态 。 
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(1) qzmall 电子 商城 后 台 管理 目录 为 admin， 做 一 个 过 滤器 ， 使 没有 登录 的 用 户 无 法 
访问 这 个 目录 。 

(2) 使 用 JSP+ServlettJavaBean 构成 的 MVC 模型 ， 完 成 手机 管理 系统 。 

二 、 任 务 描述 

(一 ) 语 言 和 环境 

实现 技术 : Java Web 技术 。 

环境 要 求 及 开发 工具 : JDK 1.7 以 上 、Eclipse 或 ntelliJIDEA. Tomcat 8.0 以 上 。 

(二 ) 程 序 整体 要 求 

主要 功能 如 下 。 

(1) 手机 添加 。 手 机 包括 手机 ID、 手 机 名 、 操 作 系统 、 手 机 图 片 、 价 格 、 手 机 描述 ， 
要 将 手机 信息 保存 到 集合 中 ， 同 时 手机 图 片上 传 到 服务 器 。 

(2) 手机 信息 查询 。 包 括 显示 所 有 手机 信息 和 根据 手机 名 查询 手机 信息 并 显示 。 

(3) 手机 修改 。 根 据 手机 id 进行 手机 修改 ， 如 果 不 存在 该 手机 则 在 页 面 中 显示 id 不 

(4) 手机 删除 。 根 据 手机 id 进行 手机 删除 ， 如 果 不 存在 该 手机 则 在 页 面 中 显示 id 不 

注意 : 数据 存储 到 集合 中 (使 用 ArrayList、HashSet 和 HashMap 集合 均 可 )。 

(三 ) 思 路 分 析 

由 场景 和 运行 效果 ， 可 以 分 析出 项 目 中 可 以 抽取 如 下 类 。 

1. 手机 类 Mob 

类 型 描述 : 能 够 描述 手机 ID、 手 机 名 、 操 作 系统 、 图 片 地 址 、 价 格 等 。 

方法 : 构造 方法 、get 和 set 方法 、toString() 方 法 。 

2. 处 理 上 传 相关 的 类 Uploadutils 

类 型 描述 : 存储 添加 页 面 中 所 有 参数 的 集合 Map<String, Object> params;， 其 中 key 值 
是 表单 中 控件 的 名 称 ，value 是 表单 控件 对 应 的 值 。 

方法 : 文件 上 传 的 工具 方法 : public static Map<String, Object> UploadFile(HttpServletRequest 
request, String uploadDirectory). 

提示 : 该 方法 负责 将 表单 中 的 信息 存储 到 集合 中 ， 并 完成 图 片 的 上 传 。 

3. 手机 数据 处 理 类 MobDaoImpl 

类 型 描述 : 存放 手机 信息 的 List: private static final List<Map<String, Object>> db。 

提示 : Map 中 存储 的 就 是 一 条 手机 的 信息 ， 也 就 是 Uploadutils 中 的 Map。 
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方法 : 添加 手机 : public void addMob(Map<String, Object> Mob)。 
查询 所 有 手机 信息 : public List<Map<String, Object>> getAlIMob()。 
根据 手机 名 称 查 询 手 机 信息 : public List<Map<String, Object>> getMobByName(String 


MobName)。 
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手机 修改 : public void updateMob(Map<String, Object> Mob。 
根据 手机 ID 进行 删除 : public void deleteMobById(String id)。 
4. Servlet 相关 类 

根据 需要 自行 定义 ， 如 对 应 增 、 删 、 改 、 查 功能 的 Servlet。 
5.JSP 页 面 

素材 中 已 提供 部 分 所 需 的 静态 页 面 ， 可 以 改 成 jsp 页面 。 
提示 : 素材 中 涉及 了 HTML 中 frame 框架 的 内 容 。 


第 八 章 后 台 操 作 .pptx 项 目 源 代 码 .zip 


一 、 选 择 题 
LBC 


2.D 
和 
12.A 


2.AD 
7.A 
12:D 


2.B 
7.C 
12.A 


BB 


2.D 
7.A 


3. BD 
8. AD 
13. D 


3.D 
8.D 
13.:D 


3:B 
8.B 
13.A 


3.B 


二 可 
8.C 


$$ 
10. BCD 


10.D 


5. BD 
10.D 


202 


电子 商务 网 站 建设 企业 案例 


一 、 选 择 题 
1.E 
6.A 
11.B 
16.B 


F 电 呈 
Ch 
12.C 
17.B 


.0 
8.C 
13.D 
18.C 


第 七 章 
4.D 5 
中 和 @ 10.B 
14.B 15.B 
19.A 


D 
D] 
B] 
[| 
[5] 
[6] 
中 
[8] 
D9] 


参考 文献 


张爱玲 . Java Web 项 目 实战 教程 [M]. 北京 : 机 械 工 业 出 版 社 ，2015. 

宁 云 智 ， 刘 志 成 . JSP 程序 设计 案例 教程 [M]. 北京 : 高 等 教育 出 版 社 ，2015. 
王国 辉 . Java Web 开发 实践 宝典 [M]. 北京 : 高 等 教育 出 版 社 ，2010. 

郑 害 . JSP Web 应 用 程序 设计 [M]. 北京 : 高 等 教育 出 版 社 ，2010. 

刘 素 芳 . JSP 动态 网 站 开发 案例 教程 [M]. 北京 : 机 械 工 业 出 版 社 ，2012. 

明日 科技 . JSP 技术 开发 大 全 [M]. 北京 : 人 民 邮 电 出 版 社 ，2007. 

汉 艳 玲 . 中 小 型 Web 项 目 开发 实战 [M]. 北京 : 人 民 邮 电 出 版 社 ，2013. 

杨 光 ， 伍 连 云 . Java Web 实践 开发 完全 学 习 手册 [M]. 北京 : 人 民 邮 电 出 版 社 ，2014. 
陈磊 ， 徐 受 鞭 . JSP 设计 与 开发 [M]. 2 版 . 北京 : 北京 理工 大 学 出 版 社 ，2016. 


[10] 刘 俊 亮 ， 王 清华 . JSP Web 设计 与 开发 [M]. 北京 : 北京 理工 大 学 出 版 社 ，2011. 


